问题
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.
<!doctype html>
<html ng-app="demo">
<head>
<script src="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('self.searchText', function(n, p) {
console.log('searchText changed from', n, 'to', p);
});
});
</script>
</head>
<body ng-controller="demoCtrl as ctrl">
<input type="text" ng-model="ctrl.searchText" />
</body>
</html>
回答1:
You need to use the alias ctrl (not self) in $scope.$watch(...):
<!doctype html>
<html ng-app="demo">
<head>
<script src="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>
<body ng-controller="demoCtrl as ctrl">
<input type="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.
回答2:
Change your $watch to:
$scope.$watch(function() {
return self.searchText;
}, function(n, p) {
console.log('searchText changed from', n, 'to', p);
});
回答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>
<html ng-app="demo">
<head>
<script src="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>
<body ng-controller="demoCtrl as ctrl">
<input type="text" ng-model="searchText" />
</body>
</html>
or use another form and change you code like this:
<head>
<script src="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>
<body ng-controller="demoCtrl as ctrl">
<input type="text" ng-model="ctrl.searchText" />
</body>
</html>
回答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
var self = this;
self.searchText = '';
$scope.self = this;
$scope.$watch('self.searchText', function(n, p) {
console.log('searchText changed from', n, 'to', p);
});
来源：https://stackoverflow.com/questions/35483905/angularjs-scope-not-watching-changes-from-view