Question

在以下代码中，$watch应在变量recalculateInfoBox发生变化时执行函数scores。但是，它什么也没做。

我已经阅读了添加true，因为$ watch的第三个变量通常会解决问题，但在这种情况下，$ watch仍然无法触发。

还需要更改哪些内容才能触发？

<html ng-app="mainModule">
    <head>
        <style type="text/css">
        </style>
    </head>    
    <body ng-controller="mainController" >

        <div>Scores: <input type="text" ng-model="scores" ng-list style="width:500px" placeholder="Enter comma-separated list..."/></div>
        <div>You have {{scores.length}} items.</div>
        <hr/>
        ng-style:
        <div ng-style="{'width': infoBox.width, 'background-color': infoBox.backgroundColor}">
            This is the info.
        </div>
        <button ng-click="infoBox.width = '300px'">small</button> 
        <button ng-click="infoBox.width = '800px'">large</button> 
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
        <script>
                    var mainModule = angular.module('mainModule', []);
                            function mainController($scope) {
                                $scope.scores = [];
                                $scope.infoBox = {width: '300px', backgroundColor: '#ddd'};
                                var recalculateInfoBox = function () {
                                    console.log('in recalc');
                                    $scope.infoBox.width = '100px';
                                };
                                $scope.$watch('scores', 'recalculateInfoBox', true);
                            }
        </script>
    </body>
</html>

Answer 1

$scope.$watch采用回调函数（不是一个名称）。

因此，更改为此应该有效：

var recalculateInfoBox = function () {
    console.log('in recalc');
    $scope.infoBox.width = '100px';
};
$scope.$watch('scores', recalculateInfoBox, true);

来自the docs：

$ watch（watchExpression，listener，[objectEquality]）;

注册侦听器回调，以便在每次执行时执行   watchExpression发生了变化。

Answer 2

问题不是因为对象相等，而是因为listener必须是函数引用而不是函数的名称。与作为第一个参数（通常作为字符串提供）的作用域属性评估不同，angular甚至不会从作用域中评估函数（即使将该方法作为作用域对象的属性添加）。

$scope.$watch('scores', 'recalculateInfoBox', true);

应该是

$scope.$watch('scores', recalculateInfoBox, true);

＆＃13;

angular.module('app', []).controller('ctrl', function($scope) {
  $scope.scores = [];
  $scope.infoBox = {
    width: '300px',
    backgroundColor: '#ddd'
  };
  var recalculateInfoBox = function() {
    console.log(arguments);
    $scope.infoBox.width = '100px';
  };
  $scope.$watch('scores', recalculateInfoBox);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div>Scores:
    <input type="text" ng-paste="handlePaste($event)" ng-model="scores" ng-list style="width:500px" placeholder="Enter comma-separated list..." />
  </div>
  <div>You have {{scores.length}} items.</div>
  <hr/>ng-style:
  <div ng-style="{'width': infoBox.width, 'background-color': infoBox.backgroundColor}">
    This is the info.
  </div>
  <button ng-click="infoBox.width = '300px'">small</button>
  <button ng-click="infoBox.width = '800px'">large</button>
</div>

＆＃13;

在处理ng-list时你可能甚至不需要对象相等，即$scope.$watch('scores', recalculateInfoBox);也应该正常工作。

为什么即使将objectEquality设置为true，$ watch也不会触发？

2 个答案: