AngularJS $scope 没有从 View 观察变化答案

【问题标题】：AngularJS $scope not watching changes from ViewAngularJS $scope 没有从 View 观察变化
【发布时间】：2016-05-30 18:18:43
【问题描述】：

我有这个小示例，我希望在浏览器控制台中看到日志消息，表明 $scope watcher 运行良好，但不幸的是事实并非如此。

<!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>

【问题讨论】：

标签： javascript angularjs binding controller watch

【解决方案1】：

您需要在$scope.$watch(...) 中使用别名ctrl（不是self）：

<!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>

当使用ng-controller="demoCtrl as ctrl" 时，Angular 会创建一个到控制器上下文对象this 的链接到作用域：$scope.ctrl。

【讨论】：

现在我明白了，所以这里的文档在谈论观看局部变量时可能不完整vm:github.com/johnpapa/angular-styleguide#controlleras-with-vm
@G.Ghez 同意，这有点令人困惑。
顺便说一句，正如我在上一个问题中所说（但为了在这里也维护提要知识），视图和控制器都在此处就变量名称达成了协议，这在它们之间创建了硬链接。我不太喜欢那个......
@G.Ghez 这更多是个人喜好。我使用controller as 语法。

【解决方案2】：

将您的 $watch 更改为：

$scope.$watch(function() {
    return self.searchText;
  }, function(n, p) {
    console.log('searchText changed from', n, 'to', p);
  });

【讨论】：

如果您观察到分配给$scope 的变量，您可以使用字符串表示法，但如果它是变量不分配给$scope，您必须使用函数。
我明白了。但是把它放在你的答案中。这将使它成为未来访问者更好的答案。

【解决方案3】：

在form you used $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;

        $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>

或使用另一种形式并像这样更改您的代码：

<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】：

答案很简单——

Angular 在作用域变量上而不是在控制器实例上监视表达式。

要使代码正常工作，您需要修改控制器代码，如下所示

var self = this;

self.searchText = '';
$scope.self = this;
$scope.$watch('self.searchText', function(n, p) {
console.log('searchText changed from', n, 'to', p);
});

【讨论】：

“controller as”构建允许自动将控制器实例附加到范围。见：github.com/johnpapa/angular-styleguide#controlleras-with-vm