我正在开发一个可以上传文件的应用程序。我想创建一个可重用的文件上传组件，它可以包含在任何需要文件上传功能的页面上。我原本以为我可以只使用 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 很陌生，所以我确定我只是错过了一些东西，或者做错了什么。我如何让这个指令起作用？