Question

我在使用手表时遇到问题，我想看一个数组的对象，让我们假设如果对象中的任何一个数组发生变化，那么应该触发监视，所以我对这个用什么感到困惑目的

任何人都可以帮我找到这两者之间的区别，并建议在这种情况下使用什么。

范围对象：

$scope.$watch('foo', fn)
$scope.$watch(function() {return $scope.foo}, fn);

$scope.$watchCollection('foo', fn)
$scope.$watchCollection(function() {return $scope.foo}, fn);

非范围对象：

$scope.$watch(obj.prop, fn)
$scope.$watch(function() {return obj.prop}, fn)

$scope.$watchCollection(obj.prop, fn)
$scope.$watchCollection(function() {return obj.prop}, fn)

Answer 1

请参阅https://docs.angularjs.org/guide/scope处的“范围$观看深度”。 Inside是一个特别有用的图形：

enter image description here

定位$scope属性是'具有数组属性的对象'（如果我正确理解了问题），我在下面的代码段中演示了一些不同的$watcher配置，以便你可以看到各种行为。

(function() {
  "use strict";

  angular.module('myApp', [])
    .controller("Controller1", ['$scope', Controller1]);

  function Controller1($scope) {
    var _objWithArrayProps = {
        'prop1': [],
        'prop2': [],
        'prop3': []
      },
      _counts = {
        'watchNoObjEquality': -1, //watchers to -1 since they fire once upon initialisation
        'watchPropNoObjEquality': -1,
        'watchObjEquality': -1,
        'watchFunctionNoObjEquality': -1,
        'watchFunctionObjEquality': -1,
        'watchCollection': -1,
        'watchCollectionFunction': -1,
        'clicks': 0
      };

    $scope.data = {
      'objWithArrayProps': _objWithArrayProps,
      'counts': _counts
    };

    $scope.$watch('data.objWithArrayProps', watchNoObjEquality);
    $scope.$watch('data.objWithArrayProps.prop1', watchPropNoObjEquality);
    $scope.$watch('data.objWithArrayProps', watchObjEquality, true);
    $scope.$watch(watchFunction, watchFunctionNoObjEquality);
    $scope.$watch(watchFunction, watchFunctionObjEquality, true);
    $scope.$watchCollection('data.objWithArrayProps', watchCollection);
    $scope.$watchCollection(watchFunction, watchCollectionFunction);

    $scope.addProperty = addProperty;
    $scope.addArrayElements = addArrayElements;
    $scope.modifyProperties = modifyProperties;
    $scope.modifyArrayElements = modifyArrayElements;

    function watchNoObjEquality(newVal, oldVal) {
      _counts.watchNoObjEquality++;
    }

    function watchPropNoObjEquality(newVal, oldVal) {
      _counts.watchPropNoObjEquality++;
    }

    function watchObjEquality(newVal, oldVal) {
      _counts.watchObjEquality++;
    }

    function watchFunction() {
      return _objWithArrayProps; // same as: return $scope.data.objWithArrayProps;
    }

    function watchFunctionNoObjEquality(newVal, oldVal) {
      _counts.watchFunctionNoObjEquality++;
    }

    function watchFunctionObjEquality(newVal, oldVal) {
      _counts.watchFunctionObjEquality++;
    }

    function watchCollection(newVal, oldVal) {
      _counts.watchCollection++;
    }

    function watchCollectionFunction(newVal, oldVal) {
      _counts.watchCollectionFunction++;
    }

    var _propNameNumberSuffix = 4; //for naming properties incrementally
    function addProperty() {
      _counts.clicks++;
      _objWithArrayProps['prop' + _propNameNumberSuffix] = [];
      _propNameNumberSuffix++;
    }

    function addArrayElements() {
      _counts.clicks++;
      for (var prop in _objWithArrayProps) {
        if (_objWithArrayProps.hasOwnProperty(prop)) {
          _objWithArrayProps[prop].push('x');
        }
      }
    }

    function modifyProperties() {
      _counts.clicks++;
      for (var prop in _objWithArrayProps) {
        if (_objWithArrayProps.hasOwnProperty(prop)) {
          _objWithArrayProps[prop] = [Math.random()]; //set to a fresh array with a random number in it
        }
      }
    }

    function modifyArrayElements() {
      _counts.clicks++;
      for (var prop in _objWithArrayProps) {
        if (_objWithArrayProps.hasOwnProperty(prop)) {
          //ensure we have at least one item in array(s)
          if (!_objWithArrayProps[prop].length) {
            _objWithArrayProps[prop].push('x');
          }

          for (var i = 0, iLen = _objWithArrayProps[prop].length; i < iLen; i++) {
            _objWithArrayProps[prop][i] = Math.random().toFixed(4);
          }
        }
      }
    }

  }

})();

body {
  font-family: "Arial", "sans-serif";
  font-size: 0.8em;
}
h1 {
  font-size: 1.4em;
}
pre {
  margin: 0;
}
pre code {
  display: block;
  background-color: #eee;
  padding: 5px;
  max-height: 200px;
  overflow: auto;
}
ul.tab li span {
  display: inline-block;
  margin: 5px 0;
}
ul.tab li {
  border-bottom: 1px dashed #ddd;
  display: block;
  padding: 0;
}
ul.tab {
  padding: 0;
}
#data,
#counts {
  width: 45%;
  display: inline-block;
  vertical-align: top;
  margin: 2%;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
<div ng-app="myApp" ng-controller="Controller1">
  <h1>Object with Array properties</h1>
  <div id='counts'>
    <strong>Watcher fired count:</strong>
    <ul class="tab">
      <li><span><strong>$watch</strong>('objWithArrayProps', ...) :</span> {{data.counts.watchNoObjEquality}}</li>
      <li><span><strong>$watch</strong>('objWithArrayProps.prop1', ...) :</span> {{data.counts.watchPropNoObjEquality}}</li>
      <li><span><strong>$watch</strong>('objWithArrayProps', ..., true) :</span> {{data.counts.watchObjEquality}}</li>
      <li><span><strong>$watch</strong>(function() {...}, ...) :</span> {{data.counts.watchFunctionNoObjEquality}}</li>
      <li><span><strong>$watch</strong>(function() {...}, ..., true) :</span> {{data.counts.watchFunctionObjEquality}}</li>
      <li><span><strong>$watchCollection</strong>('objWithArrayProps', ...) :</span> {{data.counts.watchCollection}}</li>
      <li><span><strong>$watchCollection</strong>(function() {...}, ...) :</span> {{data.counts.watchCollectionFunction}}</li>
    </ul>
    <strong>Button clicks:</strong> {{data.counts.clicks}}
  </div>
  <div id='data'>
    <pre><code>{{data.objWithArrayProps | json}}</code></pre>
  </div>
  <button ng-click="addProperty()">Add a property</button>
  <button ng-click="addArrayElements()">Add array elements</button>
  <button ng-click="modifyProperties()">Modify properties</button>
  <button ng-click="modifyArrayElements()">Modify array elements</button>
</div>

（ Plnkr ＆lt; - 为了便于实验）

$ watch（...，...，true）

正如您在代码段中所看到的，如果您想保证将每次小小的更改发送到嵌套对象/数组结构，请使用$scope.$watch(..., ..., true)，其中第3个参数使观察者对对象/数组中的每个属性进行深度比较。但是，执行此操作相对较重，因此请注意，对大型对象可能会有一些性能影响。

$ watch（function（）{}，...，...）

格式$scope.$watch(function() {...}, ...)实际上比我在代码片段中展示的更灵活，但是，我基本上只是返回对象。函数的返回值将与其先前的返回值进行比较（每次$digest运行时），因此如果您希望触发器函数触发，则需要在正确的时间返回不同的值。理想情况下，出于性能原因，您希望此功能非常轻巧简单（它将执行很多！），但根据您需要观察的数据，您可能能够实现更好的解决方案比$scope.$watch(..., ..., true)。

$ watchCollection（...，...）

正如您在代码段中看到的，这只响应集合的浅层更改（无论是对象还是数组） - 它会注意到属性是否被添加，删除，移动，以及它是否包含类似的基本值一个字符串，数字，布尔值等，它会注意到它是否发生了变化。但是，如果您的集合包含更多嵌套的对象/数组，它将不会注意到它们内部的更改（它们太深）。因此需要上述两个$watch实现中的任何一个。

<强> NG-事件

如果您感兴趣的模型更改仅由用户输入引起，请记住考虑是否可以在表单控件上使用ng-change或ng-blur（等）事件而不是观察者这个模型很可能表现得更好。

Answer 2

引用here的答案，其中OP从未接受答案..

$watchCollection会浅看单曲上的属性   对象并在其中一个更改时通知您。
     然而，
$watchGroup会观看一组个人表情。

它们在功能上并不相同。可以使用$watchGroup   你想看多个应该响应的表达式   相同的回调 - 这些可能是个人表达   针对不同的对象。这可以用于观看'foo'，   'foo.bar'和'baz.qux'。这些是3个不同的目标 - foo，   foo bar财产和baz qux财产，但他们都会   委托给同一个处理程序。
     相比之下，$watchCollection只会浅看一个   宾语。这样可以更好地处理可能会改变它的对象   属性很多（例如 - 我们自己的$scope）。持有   用我们的垃圾名称示例，实现与上面相同的方法   只想观看foo和baz，但您会收到任何通知   foo和baz中的更改（而不仅仅是通知了。{1}}和foo   foo.bar本身，baz.qux和{{1}}的更改。

Answer 3

$watchGroup提供1.3版角度。

如果您使用旧版本：

$scope.$watch(function() {
    return JSON.stringify(array);
}, function() {
});

当然你应该添加try / catch。关于性能：如果您需要观看如此复杂的数据，我认为此解决方案将具有相同的性能。无论如何测试测试...

angularJS中这些手表方法的区别？

3 个答案: