Sto lavorando a un'app con caricamenti di file. Voglio creare un componente di caricamento file riutilizzabile che possa essere incluso in qualsiasi pagina che richiede funzionalità di caricamento file. Inizialmente pensavo di poter usare solo un tag JSP. Tuttavia, abbiamo recentemente scoperto AngularJS e ora vogliamo utilizzarlo in tutta l'app. Quindi, voglio creare una direttiva che mi permetta di inserire semplicemente un tag <myApp-upload> da inserire nella mia funzionalità di upload.Creazione della direttiva AngularJS con Plupload
Per prima cosa ho reso la mia funzionalità di caricamento la propria pagina HTML per assicurarmi che AngularJS stesse giocando bene con il plugin Plupload. Ho messo insieme qualcosa di simile:
<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>
I myApp.js assomiglia a questo:
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();
});
}
Quando ho trascinare i file in, vedo compaiono i nomi dei file e l'uscita di {{uploader.files }} cambia da [] ai file nell'oggetto uploader. Quindi, ora voglio farne una direttiva. Prendo tutto il contenuto che si trova nel tag body e lo salvi in un file chiamato upload.html. Ho poi aggiunto quanto segue al myApp.js:
angular.module('myApp', [])
.directive('myAppUpload', function() {
return {
restrict: 'E',
templateUrl: 'upload.html',
};
});
allora, ho un file HTML come questo:
<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>
Quando carico questa pagina HTML, il tag <myApp-upload> fa portare nel caricamento. file html. Tuttavia, non esegue alcuna associazione di dati. In basso vedo {{uploader.files}} invece di [] che stavo vedendo inizialmente quando era la sua pagina.
Sono molto nuovo ad AngularJS, quindi sono sicuro che mi manca qualcosa o sto facendo qualcosa di sbagliato. Come faccio a far funzionare questa direttiva?
Assicuratevi di controllare la [lista violini] (https://github.com/angular/angular.js/wiki/JsFiddle-Examples) per un [drag and drop esempio di upload] (http: //jsfiddle.net/danielzen/utp7j/) fatto da qualcuno. –
Bene, il drag and drop funziona bene quando tutte le funzionalità sono la propria pagina html. Sto solo volendo sapere cosa sto facendo male con la direttiva che lo rende non funziona. – dnc253