Question

我正在开发一个可以上传文件的应用。我想创建一个可重用的文件上传组件，该组件可以包含在需要文件上载功能的任何页面上。我原本以为我可以使用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很新，所以我确定我只是遗漏了一些东西，或者做错了什么。我如何使该指令有效？

Answer 1

我发现了我的问题。我在我的模板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正在死亡，但还没有机会被包括在内。

Answer 2

我们刚刚为plUpload创建了一个Angular指令。点击这里。

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

使用Plupload创建AngularJS指令

2 个答案: