AngularJS $scope not watching changes from View

2019-07-07 07:12发布

站内问答 / JavaScript
1162 4 4

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>

4条回答
Melony?
2楼-- · 2019-07-07 07:22

Change your $watch to:

$scope.$watch(function() {
    return self.searchText;
  }, function(n, p) {
    console.log('searchText changed from', n, 'to', p);
  });
查看更多
0人赞 添加讨论(0) 举报
Deceive 欺骗
3楼-- · 2019-07-07 07:29

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>
查看更多
0人赞 添加讨论(0) 举报
ゆ 、 Hurt°
4楼-- · 2019-07-07 07:39

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);
});
查看更多
0人赞 添加讨论(0) 举报
叛逆
5楼-- · 2019-07-07 07:42

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)