Angularjs $scope Not Watching Changes From View
I have this small sample in which I hoped to see log messages in browser console indicating $scope watcher is working well, but it's unfortunately not the case.
Solution 1:
You need to use the alias ctrl (not self) in $scope.$watch(...):
<!doctype html><htmlng-app="demo"><head><scriptsrc="bower_components/angular/angular.js"></script><script>var app = angular.module('demo', ['ng']);
app.controller('demoCtrl', function($scope) {
var self = this;
self.searchText = '';
$scope.$watch('ctrl.searchText', function(n, p) {
console.log('searchText changed from', n, 'to', p);
});
});
</script></head><bodyng-controller="demoCtrl as ctrl"><inputtype="text"ng-model="ctrl.searchText" /></body></html>When ng-controller="demoCtrl as ctrl" is used, Angular creates a link to the controller context object this into the scope: $scope.ctrl.
Solution 2:
Change your $watch to:
$scope.$watch(function() {
returnself.searchText;
}, function(n, p) {
console.log('searchText changed from', n, 'to', p);
});
Solution 3:
In form you used$scope.$watch watching expression should be part of scope or root scope.
So you should change your code like this:
<!doctype html><htmlng-app="demo"><head><scriptsrc="bower_components/angular/angular.js"></script><script>var app = angular.module('demo', ['ng']);
app.controller('demoCtrl', function($scope) {
var self = this;
$scope.searchText = '';
$scope.$watch('searchText', function(n, p) {
console.log('searchText changed from', n, 'to', p);
});
});
</script></head><bodyng-controller="demoCtrl as ctrl"><inputtype="text"ng-model="searchText" /></body></html>or use another form and change you code like this:
<head><scriptsrc="bower_components/angular/angular.js"></script><script>var app = angular.module('demo', ['ng']);
app.controller('demoCtrl', function($scope) {
var self = this;
self.searchText = '';
$scope.$watch(function() { return self.searchText; }, function(n, p) {
console.log('searchText changed from', n, 'to', p);
});
});
</script></head><bodyng-controller="demoCtrl as ctrl"><inputtype="text"ng-model="ctrl.searchText" /></body></html>Solution 4:
The answer is simple -
Angular watches the expression on the scope variable and not on the controller instance.
To make the code work you need to do modify the controller code as following
varself = this;
self.searchText = '';
$scope.self = this;
$scope.$watch('self.searchText', function(n, p) {
console.log('searchText changed from', n, 'to', p);
});
Post a Comment for "Angularjs $scope Not Watching Changes From View"