isolated scope in custom diretive

Question

Hi I am new to isolated scope in custom directive

This is my directive

restrict: 'E',
        scope: {},
        template: '<input type="file" ng-model="myFile" />{{myFile.name}}',
        link: function(scope, element, attrs, sharedServices) {
            var model = $parse(attrs.fileBrowser);
            var modelSetter = model.assign;
            element.bind("change", function(e) {
            scope.fileForImagepreview = (e.srcElement || e.target).files[0];

            if (scope.fileForImagepreview.type === "image/jpeg" ||
                scope.fileForImagepreview.type === "image/jpg" ||
                scope.fileForImagepreview.type === "image/png") {
                scope.$apply(function() {
                    modelSetter(scope, element[0].firstChild.files[0]);
                });
            }

            var promise = fileReader.readAsDataURL(scope.fileForImagepreview, scope);
            promise.then(function(result) {
                scope.imageSrcForPreview = result;
            });
        });
       }

and in html i just include it as

<file-browser></file-browser>

I want file in scope of directive

You should Inject `sharedServices` to directive function then it will be available to you in link function. — Ravi Teja, Oct 06 '16 at 12:14
http://stackoverflow.com/a/39849245/4316707 check out this answer this might give you an overview.Although m not sure why you want to create it as isolated ? Do u plan to use this multiple times in different screen. — ngCoder, Oct 06 '16 at 12:18
@charlietfl There are two input fields with same model name and if i browse the image from first input it will preview after selecting it,same for second at last two different image will be previewed. — ajay dixit, Oct 06 '16 at 13:43
OK..so that is an objective... now to the problem .. what is or isn't working? Do you have errors? — charlietfl, Oct 06 '16 at 13:53
No there are no errors but in directive i didnt get any data in the scope. — ajay dixit, Oct 06 '16 at 14:00

score 1 · Accepted Answer · answered Oct 10 '16 at 09:04

create one array like

scope.imageSrcForPreview = [];

and insert the object into the array,so my function looks like.

var promise = fileReader.readAsDataURL(scope.fileForImagepreview, scope);
                promise.then(function(result) {
                    scope.imageSrcForPreview.splice(index, 1, result);
                    scope.showPreview = true;
                });

isolated scope in custom diretive

1 Answers1