Estoy trabajando en una aplicación que tendrá cargas de archivos. Quiero crear un componente de carga de archivos reutilizable que se pueda incluir en cualquiera de las páginas que necesitan la funcionalidad de carga de archivos. Originalmente estaba pensando que solo podía usar una etiqueta JSP. Sin embargo, recientemente descubrimos AngularJS y ahora queremos usarlo en toda la aplicación. Entonces, quiero crear una directiva que me permita simplemente poner una etiqueta <myApp-upload> para que quede en mi funcionalidad de carga.Creando la directiva AngularJS con Plupload
Primero hice que mi funcionalidad de carga es su propia página HTML para asegurarme de que AngularJS estaba jugando muy bien con el complemento Plupload. Junté algo como esto:
<html ng-app="myApp">
<head>
<script src="resources/scripts/angular-1.0.1.min.js"></script>
<script src="resources/scripts/myApp.js"></script>
</head>
<body>
<style type="text/css">@import url(resources/scripts/plupload/jquery.plupload.queue/css/jquery.plupload.queue.css);</style>
<script type="text/javascript" src="resources/scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="resources/scripts/plupload/plupload.full.js"></script>
<script type="text/javascript" src="resources/scripts/plupload/jquery.plupload.queue/jquery.plupload.queue.js"></script>
<div id="uploadContainer" ng-controller="FileUploadCtrl">
<div id="dropArea" style="border: 1px black dashed;">Drag files to here<br><br><br></div>
Files to upload:<br>
<div ng-repeat="currFile in uploader.files">{{currFile.name}} ({{currFile.size}})</div>
<br><br>
<!-- For debugging -->
{{uploader.files}}
</div>
</body>
</html>
Los myApp.js se parece a esto:
function FileUploadCtrl($scope)
{
$scope.uploader = new plupload.Uploader({
runtimes : 'html5,flash,html4',
url : 'media/upload',
max_file_size : '10mb',
container: 'uploadContainer',
drop_element: 'dropArea'
});
$scope.uploader.init();
$scope.uploader.bind('FilesAdded', function(up, files) {
$scope.$apply();
});
}
Cuando arrastro archivos en, veo que aparecen los nombres de los archivos y la salida de {{uploader.files }} cambie de [] a los archivos en el objeto de subida. Entonces, ahora quiero convertirlo en una directiva. Tomo todo el contenido que está en la etiqueta de cuerpo y lo guardo en un archivo llamado upload.html. Luego añade lo siguiente a myApp.js:
angular.module('myApp', [])
.directive('myAppUpload', function() {
return {
restrict: 'E',
templateUrl: 'upload.html',
};
});
entonces, tengo un archivo HTML como esto:
<html ng-app="myApp">
<head>
<script src="resources/scripts/angular-1.0.1.min.js"></script>
<script src="resources/scripts/myApp.js"></script>
</head>
<body>
<myApp-upload>
This will be replaced
</myApp-upload>
</body>
</html>
Cuando me carga esta página HTML, la etiqueta <myApp-upload> trae en la subida. archivo html Sin embargo, no hace ninguno de los enlaces de datos. En la parte inferior veo {{uploader.files}} en lugar de [] que estaba viendo inicialmente cuando era su propia página.
Soy muy nuevo en AngularJS, así que estoy seguro de que me estoy perdiendo algo o estoy haciendo algo mal. ¿Cómo hago funcionar esta directiva?
Asegúrese de verificar la [lista de violines] (https://github.com/angular/angular.js/wiki/JsFiddle-Examples) para un [arrastrar y soltar ejemplo de carga] (http: //jsfiddle.net/danielzen/utp7j/) alguien hecho. –
Bueno, el método de arrastrar y soltar funciona bien cuando toda la funcionalidad es su propia página html. Solo quiero saber qué estoy haciendo mal con la directiva que hace que no funcione. – dnc253