$watch in Angular JS

When you create databinding in somewhere in the application on a scope , angular automatically created a watch internally , means it will listen the changes in the variable you bind.

Example
angular.module('app', []);
angular.module('app').controller('ctrl', function ($scope) {
$scope.size = 100;

});
angular.module('app').directive('heightDynamic', function () {
return {
link: function (scope, el, attrs) {
scope.$watch(attrs['heightDynamic'], function (newVal) {
el.css('height', newVal + 'px');
});
}
}
});

10-25-2015 4-59-11 PM

10-25-2015 4-59-36 PM

when the the value of the model ‘size’ changes, the size automatically set as a height of that div element.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s