1

使用 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 = [];
4

0 回答 0