javascript - 如何使用具有对象相等性的 $watchGroup 或深入观察组中的属性？

Question

我想要一个指令在三个范围变量发生变化时重新呈现 HTML。前两个只是整数，第三个是数组。

我们有 $watchGroup 来观察几个变量，我们有 $watch 和 objectEquality 作为第三个参数，我们有 $watchCollection 类似于 $watch，但隐含了 objectEquality。

有没有办法写一个类似这样的$watch？

$scope.$watchGroup(['number1', 'number2', 'myArray'], callback, true); // true for objectEquality

Answer 1

好吧，watchGroup 似乎不支持深度监视。因此，您可能可以通过注册一个匿名的深度观察者来进行黑客攻击，并使用从观察函数传入的值数组。

$scope.$watch(function(){
     return ['number1','number2','myArray'].map(angular.bind($scope, $scope.$eval));
  }, function(newV){
      console.log(newV);
  },true);

Demo

或者只是将此函数作为实用函数添加到 rootScope 上，并从任何继承的范围访问它。

.run(function($rootScope){
  $rootScope.deepWatchGroup = function(exp, callback){
    if(!angular.isArray(exp) || !thisScope.$watch) return; //Or log some error if array is not passed in or the context is not really a scope object

   var thisScope = this, //get scope
        evalFunc = angular.bind(thisScope, thisScope.$eval); //and a bound eval func

     thisScope.$watch(function(){
        return exp.map(evalFunc); //return array of evaluated values
     }, callback,true);
   }
});

然后从你的 Controller 做:

$scope.deepWatchGroup(['number1','number2','myArray'],function(newV){
  console.log(newV);
});

Demo