angularjs not digesting the scope?

Question

Angular v1.2.17

I am creating a directive for formatting the out put using filters. I'm using the directive in another one.

My problem is that the directive does not updates the DOM when the value changes in the parent directive.

I am subscribing to the value variable using scope.$watch.

app.directive('mdmFormattedOut', ['$filter', 'appSettingsService', function($filter, appSettingsService){
return{
    restrict: 'A',
    replace: true,
    template:'<span ng-bind="valueToDisplay"></span>',
    scope:{
        value: '=',
        datatype: '='
    },
    link: function(scope){
        scope.$watch('value', format());
        function format(){
            switch(scope.datatype){
                case 'date':
                    scope.valueToDisplay = $filter('date')(scope.value, appSettingsService.dateFormat);
                    break;
                case 'currency':
                    scope.valueToDisplay = $filter('currency')(scope.value, appSettingsService.currency);
                    break;
                default:
                    scope.valueToDisplay = scope.value;
                    break;
            }
        }
    }
};

}]);

If I replace ng-bind="valueToDisplay" with ng-bind="value" then the things are fine.

What is the catch? Why subscribing manually does not work?

How are you creating this? <div mdmFormattedOut></div> ?

Mohamed El Mahallawy
– Mohamed El Mahallawy

2014-07-01 18:13:55 +00:00
Commented Jul 1, 2014 at 18:13 — Mohamed El Mahallawy
– Mohamed El Mahallawy, Commented Jul 1, 2014 at 18:13

gkalpak · Accepted Answer · 2014-07-01 18:19:21Z

2

The $watch() function expects a callback function as a 2nd argument.
Your code should look like:

scope.$watch('value', format);

_{Instead of passing a callback, you were passing the return of calling format() which is undefined.}

answered Jul 1, 2014 at 18:19

gkalpak

48.2k8 gold badges108 silver badges120 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

zszep Over a year ago

That's true, this was surely not his intent. But it shouldn't be the reason for not working because the function is still firing and changing the value. See this plunker plnkr.co/edit/YYh0utqsFWfGQKrOj4Ay?p=preview

gkalpak Over a year ago

The function executes once (because you call it explicitly) - this doesn't mean that the $watch works and updates the data when subsequest changes take place.

Mohamed El Mahallawy Over a year ago

don't know how I missed that in my answer!

gkalpak Over a year ago

@MohamedElMahallawy: Probably because it was too obvious :)

Mohamed El Mahallawy · Accepted Answer · 2014-07-01 18:17:46Z

1

Firstly, from what I understand, you don't need a two-way binding for your scopes.

 scope:{
        value: '@',
        datatype: '@'
    },

Secondly, your template should probably look like this:

<span>{{valueToDisplay}}</span>

answered Jul 1, 2014 at 18:17

Mohamed El Mahallawy

14k13 gold badges56 silver badges89 bronze badges

1 Comment

Razvan Over a year ago

That didn't solve the problem, but still you have a point. No need for two way binding!

Collectives™ on Stack Overflow

angularjs not digesting the scope?

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related