Angular $ watch不工作?

时间:2013-09-17 15:32:32

标签: angularjs

以下代码仅在最初加载页面时记录。怎么了?

<!DOCTYPE html>
<html ng-app>
    <head>
        <title>Test</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
    </head>
    <body>
        <div ng-controller="PageController">
            <p ng-bind="model.header"></p>
            <p>Value: <input ng-model="model.header" /></p>
        </div>
        <script>
            function PageController($scope) {
                $scope.model = {};
                $scope.model.header = 'Header';

                $scope.onModelChange = function (newValue, oldValue, scope) {
                    console.log('model changed > newValue: ' + newValue + ' > oldValue: ' + oldValue);
                };

                $scope.$watch($scope.model, $scope.onModelChange, true);
            }
        </script>
    </body>
</html>

2 个答案:

答案 0 :(得分:14)

$ watch的第一个参数应该是范围属性本身

$scope.$watch("model", $scope.onModelChange);

并且您不需要在此属性上启用深度监视(第三个参数)

答案 1 :(得分:5)

正如Florian F所提到的,第一个参数是您要观察的范围属性的字符串。

$scope.$watch("model", $scope.onModelChange, true);

但是,当您正在观察对model.header的更改时,需要设置'deep'参数。如果不是,则只有在更新模型对象引用本身时才会触发监视。

这是一个显示浅表和深表的傻瓜,浅表不起作用,因为它只是观看模型对象参考。 http://plnkr.co/edit/ejMc2pBjIFD9aX6PBsY1