How to have access to directive scope value from my main controller

[Akinsanya Olanrewaju]

Web API file Upload with AngularJS - https://code.msdn.microsoft.com/AngularJS-with-Web-API-22f62a6e#content

This tutorial upload selected files to the server but there is no way to get the selected filename exception from a directive,

Please, i need a way to get the filename of the selected file from the directive scope, so that i can use it in another controller

This is the focus area

(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;
    }
}

})();

The Directive Template

<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>

From my main controller, i want to have access to the directive scope {{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 = []; 

The basic ideology now is finding a way of passing the directive input value to my main controller, 
so that i can use the value for other things. Thanks

[Sander Elias]

Hi Akinsanya,

Probably you can inject the photomanager into your own controller, and use that. Not sure, as it is missing here.

When that does not help, you can change the directive, to a isolate scope, that exposes the photos array.

meaning, in stead of `scope:true` do `scope:{photos:'='}`, you then can provide an array via your template/html

Regards

Sander

[Akinsanya Olanrewaju]

I have try the suggested method, gut i can get to update the scope of my controller from the directive.

[Sander Elias]

Hi Akinsanya,

It becomes much easier to help you if you provide us a plunk illustrating your issue.

Regards

Sander

[Akinsanya Olanrewaju]

In will provide it as soon as possible.

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/-RymmXNK6FI/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.