複数ファイルのアップロード機能を実装しようとしていて、このhttp://blueimp.github.io/jQuery-File-Upload/angularjs.htmlに出くわしました。
私のフォームでng-switchは、フォーム ウィザードの一部としてフォームのさまざまな部分を読み込むために使用しています。フォームの 2 番目の部分では、ユーザーが写真をアップロードする必要があります。ここから問題が発生します。それが壊れている理由を理解しています -- ng-switch、他の多くのディレクティブで、新しいスコープを作成します。回避策は、スコープに直接「書き込む」のではなく、オブジェクトを使用することです$scope.booking.amount。$scope.amount
では、jquery-file-upload またはその他のサードパーティ ライブラリをオブジェクトに正しく「バインド」して、これらのスコープの問題を防ぐにはどうすればよいでしょうか。
jquery-file-upload の関連部分:
- https://github.com/blueimp/jQuery-File-Upload/blob/master/js/app.js
- https://github.com/blueimp/jQuery-File-Upload/blob/master/js/jquery.fileupload-angular.js
私のコードの関連部分:
意見
<div data-ng-switch="getCurrentStep()" data-ng-animate="'slide'">
<div data-ng-switch-when="one">
<!-- First part of form -->
<textarea data-ng-model="viewing.remarks" type="text" rows="4" cols="10" placeholder="A short description of the property"></textarea>
</div>
<div data-ng-switch-when="two">
<!-- Second part of form -->
<input type="file" name="files[]" multiple data-ng-disabled="disabled">
<ul class="inline-list">
<li data-ng-repeat="file in queue" data-ng-switch data-on="!!file.thumbnailUrl">
<div class="preview" data-ng-switch-when="true">
<a data-ng-href="{{file.url}}" title="{{file.name}}" download="{{file.name}}" data-gallery>
<img data-ng-src="{{file.thumbnailUrl}}" alt="">
</a>
<a href="" class="text-center" data-ng-click="file.$cancel()" data-ng-hide="!file.$cancel">Cancel</a>
</div>
<div class="preview" data-ng-switch-default data-file-upload-preview="file"></div>
</li>
</ul>
</div>
コントローラ
主なことは、サービスから呼び出される表示オブジェクトがあることです。
$scope.viewing = new Viewing()
$scope.queueでは、現在のコード コンテキストでは、jquery-file-upload から取得した を$scope.viewingオブジェクトと通信するにはどうすればよいでしょうか?