CODEWITHSUNDEEP
angularjsservicedirective
Klian
Klian

Reputation: 1565

$scope.$watch doesn't update after service call in directive

I have a directive which loads a image data template.

The problem is that It doesn't update the image date after the service which retrieve the img information is called.

This is my code:

Controller method:

$scope.watchImage = function(file_id){
        FileService.getFile(file_id)
        .then(
            function(data){
                if(data.file){
                    $scope.img = data.file; 
                    console.log('Service called');
                }
            }
        );
    }

Directive:

app.directive('imageDetails', function() {
    return {
        scope: {
            img: '='
        },
        restrict: 'E',
        link: function($scope, element, attrs){
            $scope.$watch(function() { 
                return $scope.img; 
            }, function() { 
                console.log($scope.img); 
            });
        },
        template: 'IMG: {img}'
    };
});

HTML:

<div class="ui container">
        <h2 class="ui dividing header">Images</h2>
    </div>

    <div ng-view></div>

    <image-details img="img"></image-details>
</div>

Log result:

undefined
Service called

Any idea how to solve it ?

Thanks!

Upvotes: 0

Views: 340

Answers (5)

Klian
Klian

Reputation: 1565

First of all, thank you to everyone for your replies. All of them help me in the solution.

Finally this is my working code.

Directive:

app.directive('imageDetails', function() {
    return {
        scope: {
            img: '='
        },
        restrict: 'E',
        template: 'IMG: {{img}}'
    };
});

And I added the directive to my template (I was adding it outside ngview).

Upvotes: 1

David Villacis C.
David Villacis C.

Reputation: 101

This is a clear case of when the scope is affected outside the module. For those cases the lifecycle will not do the digest of the scope as you will expect.

You have to manually $digest or $apply when you want to notify your app that the scope have changed inside your directive

Upvotes: 0

eliagentili
eliagentili

Reputation: 619

First of all use a controller instead of link function because you don't need that. Link function is deprecated for simple components like this in angular 1.5.

Then, for using $watch, you need to specify what variable you want to watch, and only after what to do when it's change. 

$watch('varToWatch', function(newValue) {...});

That said, if you use a controller instead of the link function, you probably use also a "Controller as" syntax. When you use it, you need to specify the "view name" of the variable you want to watch. For example: 

app.directive('imageDetails', function() {
return {
    scope: {
        img: '='
    },
    restrict: 'E',
    controllerAs: '$ctrl',
    controller: function($scope){
        $scope.$watch('$ctrl.img', function(newVal) { 
            console.log(newVal);
            // if you want you can assign new value to your variable
            // $scope.img = newVal;
        });
    },
    template: 'IMG: {img}'
};

});

Try that and tell me if it's works for you ;)

Upvotes: 0

ojus kulkarni
ojus kulkarni

Reputation: 1907

I think your directive should be Like :

app.directive('imageDetails', function() {
return {
    scope: {
        img: '='
    },
    restrict: 'E',
    link: function(scope, element, attrs){
        scope.$watch('img',function(image) { 
            return image; 
        }, function() { 
            console.log(image); 
        });
    },
    template: 'IMG: {img}'
};
});

Upvotes: 0

Hadi
Hadi

Reputation: 17289

you have some mistake in template and in link function. 

var app = angular.module('myApp', []);
app.controller('mainCtrl', function ($scope) {
  $scope.img = {id: 1, title: "avatar.jpeg", slug: "avatar.jpeg", filesize: 24875, created_at: "2016-03-10 11:44:59"};
               
    })

app.directive('imageDetails', function() {
    return {
        scope: {
            img: '='
        },
        restrict: 'E',
        link: function(scope, element, attrs){
            scope.$evalAsync(function() {
           return scope.img; 
       });

        },
        template: 'IMG: {{img}}'
    };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="mainCtrl">


    <image-details img="img"></image-details>
</div>

Upvotes: 0

Related Questions