【发布时间】：2012-06-30 20:14:59
【问题描述】：
我正在开发一个可以上传文件的应用。我想创建一个可重用的文件上传组件，它可以包含在任何需要文件上传功能的页面上。我原本以为我可以只使用 JSP 标记。然而，我们最近发现了 AngularJS，现在想在整个应用程序中使用它。所以，我想创建一个指令，让我可以简单地放置一个 <myApp-upload> 标签来粘贴我的上传功能。
我首先将我的上传功能设置为自己的 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> 标签确实会引入 upload.html 文件。但是，它不执行任何数据绑定。在底部，我看到的是{{uploader.files}}，而不是我最初看到的[]，当它是它自己的页面时。
我对 AngularJS 很陌生，所以我确定我只是遗漏了一些东西，或者做错了什么。如何让这个指令生效？
【问题讨论】：
-
请务必查看fiddles list 以获取某人制作的drag and drop upload example。
-
好吧，当所有功能都是它自己的 html 页面时，拖放就可以正常工作。我只是想知道我在使指令不起作用的指令上做错了什么。