Dosya yüklemeleri olan bir uygulama üzerinde çalışıyorum. Dosya yükleme işlevselliğine ihtiyaç duyan sayfaların herhangi birinde bulunabilecek yeniden kullanılabilir dosya yükleme bileşeni oluşturmak istiyorum. Aslında bir JSP etiketi kullanabileceğimi düşünüyordum. Bununla birlikte, yakın zamanda AngularJS'yi keşfettik ve şimdi uygulama boyunca kullanmak istiyoruz. Bu yüzden, benim upload işlevime yapışmak için bir <myApp-upload> etiketini koymamı sağlayacak bir direktif yaratmak istiyorum.Plupload ile AngularJS yönergesi oluşturma
İlk olarak, yükleme işlevimi AngularJS'nin Plupload eklentisiyle güzelce oynatıldığından emin olmak için kendi HTML sayfasından oluşturdum.
<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>
myApp.js şuna benzer:: Ben dosyaları sürüklediğinizde
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();
});
}
, ben dosya adları görünmesi ve {{uploader.files çıktısını ben birlikte böyle bir şey koymak }} Yükleyici nesnesindeki dosyalara [] arasında geçiş yapın. Yani şimdi onu bir direktif haline getirmek istiyorum. Gövde etiketindeki tüm içeriği alıp upload.html adlı bir dosyaya kaydediyorum.
angular.module('myApp', [])
.directive('myAppUpload', function() {
return {
restrict: 'E',
templateUrl: 'upload.html',
};
});
Sonra, böyle bir HTML dosyası var: Bu HTML sayfası yüklediğinizde, <myApp-upload> etiket yüklemenizde getiriyor
<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>
Sonra myApp.js için aşağıdaki eklendi. html dosyası. Ancak, veri bağlama herhangi bir yapmaz. Altta, kendi sayfası olduğunda başlangıçta gördüğüm [] yerine {{uploader.files}}'u görüyorum.
AngularJS için çok yeniyim, bu yüzden eminim ki bir şeyi özlüyorum ya da yanlış bir şey yapıyorum. Bu yönerge nasıl çalışır?
bir için [kemanlar listesi] (https://github.com/angular/angular.js/wiki/JsFiddle-Examples) kontrol [sürükle ve yükleme örneği damla] (http emin olun: //jsfiddle.net/danielzen/utp7j/) birisi yaptı. –
Peki, tüm işlevsellik kendi html sayfası olduğunda sürükle ve bırak işlemi gayet iyi çalışıyor. Sadece işe yaramayacak direktifle ne yaptığımı bilmek istiyorum. – dnc253