でディレクティブ。私は再利用可能なファイルアップロードコンポーネントを作成して、ファイルアップロード機能が必要なページに含めることができます。もともと私はJSPタグを使うことができると思っていました。しかし、我々は最近、AngularJSを発見し、アプリケーション全体で使用したいと考えています。ですから、<myApp-upload>タグをアップロード機能に付けるだけの指示文を作成したいと思います。作成AngularJSは、私は、ファイルのアップロードを持っていますアプリに取り組んでいますPlupload
私が最初にそれがAngularJSはPluploadプラグインとうまく遊んでいたことを確認するために独自の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>
<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の出力を参照してください}} []からuploaderオブジェクトのファイルに変更します。ですから、今私はそれを指示にしたいと思います。 bodyタグにあるすべてのコンテンツを取得し、upload.htmlというファイルに保存します。
angular.module('myApp', [])
.directive('myAppUpload', function() {
return {
restrict: 'E',
templateUrl: 'upload.html',
};
});
はその後、私はこのようなHTMLファイルを持っている：私は、このHTMLページをロードすると、<myApp-upload>タグはアップロードに持ち込むん
<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>
私はその後myApp.jsに次を追加しました。 htmlファイル。ただし、データバインディングは実行されません。一番下には[]の代わりに{{uploader.files}}が表示されていました。
私はAngularJSに非常に新しいですので、私は、私はちょうど何かが足りない、または何か間違ったことをやっていると確信しています。この指令はどのように働かせるのですか？
ため[フィドルリスト]（https://github.com/angular/angular.js/wiki/JsFiddle-Examples）を確認し、[ドラッグして、アップロードの例をドロップ]にしてくださいます（http： //jsfiddle.net/danielzen/utp7j/）誰かが作った。 –
ドラッグ＆ドロップは、すべての機能が自分のhtmlページである場合にうまく機能します。私はそれがうまくいかない指示に間違っていることを知りたいだけです。 – dnc253