Web API文件使用AngularJS上传 - 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]。名称}}
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 = [];