dnc*_*253 9 plupload angularjs
我正在开发一个可以上传文件的应用.我想创建一个可重用的文件上传组件,该组件可以包含在需要文件上载功能的任何页面上.我原本以为我可以使用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很新,所以我确定我只是缺少某些东西,或者做错了什么.如何使此指令有效？
我找到了我的问题。我在模板 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 文件到主 index.html 文件。
当尝试调用脚本中的一些 Plupload 内容时，javascript 快要死了，而脚本中还没有机会包含在内。
| 归档时间： |
|
| 查看次数： |
5205 次 |
| 最近记录： |