9

私はファイルをアップロードするアプリに取り組んでいます。ファイルアップロード機能が必要な任意のページに含めることができる再利用可能なファイルアップロードコンポーネントを作成したいと思います。もともとは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を初めて使用するので、何かが足りないか、何か間違ったことをしていると確信しています。このディレクティブを機能させるにはどうすればよいですか？

4

2 に答える 2

3

私は自分の問題を理解しました。テンプレートの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が死にかけていましたが、まだ含まれる機会がありませんでした。

于 2012-07-04T19:00:57.980 に答える
1

plUploadのAngularディレクティブを作成しました。こちらを確認してください。

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

于 2013-10-07T08:50:51.497 に答える