AngularJS を使用した Web API ファイルのアップロード - https://code.msdn.microsoft.com/AngularJS-with-Web-API-22f62a6e#content
このチュートリアルでは、選択したファイルをサーバーにアップロードしますが、選択したファイル名の例外をディレクティブから取得する方法はありません。
別のコントローラーで使用できるように、選択したファイルのファイル名をディレクティブ スコープから取得する方法が必要です。
これがフォーカスエリアです
(function () {
'use strict';
angular
.module('app.photo')
.directive('egPhotoUploader', egPhotoUploader);
egPhotoUploader.$inject = ['appInfo','photoManager'];
function egPhotoUploader(appInfo, photoManager) {
var directive = {
link: link,
restrict: 'E',
templateUrl: 'app/photo/egPhotoUploader.html',
scope: true
};
return directive;
function link(scope, element, attrs) {
scope.hasFiles = false;
scope.photos = [];
scope.upload = photoManager.upload;
scope.appStatus = appInfo.status;
scope.photoManagerStatus = photoManager.status;
}
}
})();
ディレクティブ テンプレート
<form name="newPhotosForm" role="form" enctype="multipart/form-data" ng-disabled="appStatus.busy || photoManagerStatus.uploading">
<div class="form-group" ng-hide="hasFiles">
<label for="newPhotos">select and upload new photos</label>
<input type="file" id="newPhotos" class="uploadFile" accept="image/*" eg-files="photos" has-files="hasFiles" multiple>
</div>
<div class="form-group" ng-show="hasFiles && !photoManagerStatus.uploading">
<div>
File Name:{{photos[0].name}}
</div>
<input class="btn btn-primary" type="button" eg-upload="upload(photos)" value="upload">
<input class="btn btn-warning" type="reset" value="cancel" />
</div>
メイン コントローラーから、ディレクティブ スコープ {{vm.photos[0].name}} にアクセスしたい
function link(scope, element, attrs) {
scope.hasFiles = false;
scope.photos = [];
scope.upload = photoManager.upload;
scope.appStatus = appInfo.status;
scope.photoManagerStatus = photoManager.status;
}
// This is scope that i need in the main controller, please how can i get it out.
scope.photos = [];