$ watch ngModel from an internal directive using an isolated area

Question

I am trying to see my model value from my binding function.

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

When I change the model value inside my controller, the $ watch function does not start.

 $scope.myModel = "ACT"; $timeout(function() { $scope.myModel = "TOTALS"; }, 2000); 

Fiddle: http://jsfiddle.net/dkrotts/BtrZH/4/

What am I missing here?

Answer 1

The problem is that you are $watch ing attrs.ngModel , which is equal to "myModel". You do not have a "myModel" associated in your area. You want $watch "model". This is what is related to your directive. See http://jsfiddle.net/BtrZH/5/

Answer 2

You will need to look at the function returning the $ modelValue that you are looking at.

The following code shows a basic example:

 app.directive('myDirective', function (){ return { require: 'ngModel', link: function(scope, element, attrs, ngModel) { scope.$watch(function () { return ngModel.$modelValue; }, function(newValue) { console.log(newValue); }); } }; }); 

Here is the plunker of the same idea in action.

Answer 3

The correct way to do this is:

 app.directive('myDirective', function () { return { require: 'ngModel', link: function (scope, element, attrs, ngModel) { ngModel.$render = function () { var newValue = ngModel.$viewValue; console.log(newValue) }; } }; }); 

Answer 4

Here is another way to do this:

 app.directive('myDirective', function (){ return { require: 'ngModel', link: function(scope, element, attrs, ngModel) { attrs.$observe('ngModel', function(value){ // Got ng-model bind path here scope.$watch(value,function(newValue){ // Watch given path for changes console.log(newValue); }); }); } }; }); 

By doing this, you can listen to value changes using such bindings

Answer 5

This is a follow-up to @Emmanuel's answer above to @Martin Velez's answer, although I know it's quite late! (Also, I can not comment, so if this is not a suitable place for this, sorry!)

I'm not sure which version of Angular OP was used, but in Angular # 1.2 +, at least on the official docs https://docs.angularjs.org/api/ng/type/ngModel.NgModelController#$render , $ render is displayed in the following way:

Called when a view needs to be updated. The ng-model directive user is expected to implement this method.

The $ render () method is called in the following situations:

Called

$ rollbackViewValue (). If we roll back the view to the last committed value, $ render () is called to update the input control. The value referenced by the ng model changes programmatically, and both $ modelValue and $ viewValue are different from the last time. Since the ng model does not make deep observations, $ render () is only called if the values ​​of $ modelValue and $ viewValue are actually different from their previous value.

I interpret this as meaning that the correct $ way to look at ngModel from a directive is to require ngModel and implement a communication function that introduces ngModelController. Then use the ngModel API, which is built into $ render-on-change ($ watch) or something else.

Answer 6

There are two ways to do this.

1) You can use $attrs.[any_attribute] and install any listener on it

2) You can have a selected area with a variable 2 binding methods and install a listener on it. If you want more, here's a cool article

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