使用Plupload創建AngularJS指令

我正在研究一個將上傳文件的應用程序。我想創建一個可重用的文件上傳組件，該組件可以包含在任何需要文件上傳功能的頁面上。我原本以爲我可以使用JSP標籤。不過，我們最近發現了AngularJS，現在想要在整個應用程序中使用它。所以，我想創建一個指令，允許我簡單地將<myApp-upload>標籤粘貼到我的上傳功能中。使用Plupload創建AngularJS指令

我首先讓自己的HTML頁面上傳了我的上傳功能，以確保AngularJS與Plupload插件配合良好。我放在一起這樣的事情：

<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看起來是這樣的：

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(); 
    }); 
}

當我在拖動文件，我看到文件名出現，{{uploader.files的輸出}}從[]更改爲上傳器對象中的文件。所以，現在我想把它變成一個指令。我將body標籤中的所有內容都保存到一個名爲upload.html的文件中。然後添加以下到myApp.js：

angular.module('myApp', []) 
.directive('myAppUpload', function() { 
    return { 
     restrict: 'E', 
     templateUrl: 'upload.html', 
    }; 
});

然後，我有一個HTML文件中像這樣：

<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>

當我打開這個HTML頁面中，<myApp-upload>標籤並上載帶。 html文件。但是，它不會執行任何數據綁定。在底部，我看到{{uploader.files}}而不是[]，我最初看到它是它自己的頁面。

我對AngularJS很新，所以我確信我只是錯過了一些東西，或者做錯了什麼。我如何得到這個指令的工作？

來源

2012-06-30 dnc253

務必檢查[小提琴列表（https://github.com/angular/angular.js/wiki/JsFiddle-Examples）的[拖放上傳示例]（HTTP： //jsfiddle.net/danielzen/utp7j/）有人制作。 –

那麼，當所有功能都是自己的html頁面時，拖放功能就可以正常工作。我只是想知道我在做什麼使指令不起作用的錯誤。 – dnc253

我想出了我的問題。我在模板HTML頁面中包含了所有的javascript和CSS。我試着將它移動到主HTML文件，然後它工作。換句話說，我將

<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>

從upload.html文件轉換爲main，index.html文件。

當試圖調用腳本中的一些Plupload內容時，javascript已經死亡，但還沒有機會被包含在內。

來源

2012-07-04 19:00:57 dnc253

我們剛剛爲plUpload創建了一個Angular指令。在這裏檢查。

http://plupload-angular-directive.sahusoft.info/

來源

2013-10-07 08:50:51

我在我的項目中使用了這個指令，但它對於IE 9來說是失敗的，它會返回json在瀏覽器中下載第一次下載，並且從下一次開始它不起作用。請幫忙。 – KanhuP2012

它應該在IE9上工作，我沒有在IE9上測試的環境。如果這不起作用，那麼你應該嘗試使用https://blueimp.github.io/jQuery-File-Upload/angularjs.html –

沒有提供適當的文檔。 –

使用Plupload創建AngularJS指令

回答

相關問題