CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangularjs-scope
user1869935
user1869935

Reputation: 759

AngularJs: $watch not triggering

I know this have been asked many times, but any of the solutions exposed seem to work for me. I have this HTML

<body ng-controller="mainCtrl">
  <h4>{{size}}</h4>
  <input type="range" ng-model="size" min="1" max="100" />
  <div font-scale="{{size}}">I'm some text</div>
</body>

The input works, the value changes and it is actually binding to {{size}} correctly.

Then I have my directive:

MyApp.controller('mainCtrl', function($scope) {
  $scope.size = 30;
});


MyApp.directive('fontScale', function(){
 return {
   link: function(scope, el, attrs){
     scope.$watch(attrs['fontScale'], function(newVal){
       console.log('testing');
       el.css('font-size', newVal+'px');
     });
    }
   }
 });

The 'testing' shows up in console only once, when the page loads, but when changing the value through the slider, it doesn't. But it DOES bind the value of {{size}} correctly.

Adding 'TRUE' as a third parameter doesn't work, and curiously, the tutorial I'm learning this from works with the same code!

What am I missing?

Upvotes: 0

Views: 186

Answers (1)

Markus
Markus

Reputation: 1016

If the size property is available in your directives scope (as stated in your comment). Then the following should work:

scope.$watch('size', function(newVal) {
    el.css('font-size', newVal+'px');
}

Upvotes: 2

Related Questions