The control value of the controller controller model from the internal directive

Question

I am trying to have angular look at the $viewValue controller from inside the directive.

script: http://jsfiddle.net/dkrotts/TfTr5/5/

 function foo($scope, $timeout) { $scope.bar = "Lorem ipsum"; $timeout(function() { $scope.bar = "Dolor sit amet"; }, 2000); } myApp.directive('myDirective', function() { return { restrict: 'A', require: '?ngModel', link: function (scope, element, attrs, controller) { scope.$watch(controller.$viewValue, function() { console.log("Changed to " + controller.$viewValue); }); } } }); 

As it is, the $ watch function does not capture the model change made after 2 seconds from the inside of the controller. What am I missing?

Answer 1

$watch accepts the "name" of the property to view in the area, you ask it to look at the value. Change it to look at attrs.ngModel , which returns "bar", now you are looking at scope.bar . You can get the value just like you, or use scope[attrs.ngModel] , which is similar to the expression scope["bar"] , which again matches scope.bar .

 scope.$watch(attrs.ngModel, function(newValue) { console.log("Changed to " + newValue); }); 

To clarify user comment 271996: scope.$eval is used because you can pass object notation to the ng-model attribute. those. ng-model="someObj.someProperty" , which will not work because scope["someObj.someProperty"] not valid. scope.$eval used to evaluate this string in the actual object, so scope["someObj.someProperty"] becomes scope.someObj.someProperty .

Answer 2

Required to add: in 1.2.x, with an isolated area, the above does not work. http://jsfiddle.net/TfTr5/23/

The workaround I came up with was that $ watch also takes a function, so you can access your controller using this.

 scope.$watch( function(){return controller.$viewValue}, function(newVal, oldVal){ //code } ) 

Working fiddle: http://jsfiddle.net/TfTr5/24/

If anyone has an alternative, I would gladly welcome him!

Answer 3

If you want to bind a value within an isolated scope, there are two ways to do this. The first way you can take advantage, even you do not have an isolated area. Here's how to do it:

1) use $attrs.any_attribute and bind it (set in hours)

2) use 2 binding methods ('=') and set it to listener

if you want more with examples, here is a great article

http://www.w3docs.com/snippets/angularjs/bind-variable-inside-angularjs-directive-isolated-scope.html

Answer 4

If you want debounce for a model value, it's worth mentioning the debounce setting in ng-model-option :

 <input type="text" ng-model-options="{ debounce: 1000 }" ng-model="search"/> 

For example: this watch starts 1000 ms after the change and reset when the new changes.

 scope.$watch(attrs.ngModel, function(newValue) { }); 

https://docs.angularjs.org/api/ng/directive/ngModelOptions