angularjs 如何使用一个$watchGroup与对象相等或深度观察组中的属性?

avkwfej4  于 2022-11-21  发布在  Angular
关注(0)|答案(3)|浏览(131)

我需要一个指令,当三个作用域变量改变时,重新呈现HTML。前两个变量是整数,第三个变量是数组。
我们有$watchGroup来监视几个变量,我们有$watchobjectEquality作为第三个参数,我们有$watchCollection,它类似于$watch,但隐含了objectEquality
有没有办法写出类似的$watch

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

2vuwiymt1#

看起来watchGroup并不支持深度观察,所以你可以做一个黑客,通过注册一个匿名的深度观察器,并从watch函数中传入数组值。

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

或者只是在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);
   }
});

并从控制器执行以下操作:

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

ruyhziif

ruyhziif2#

如果你想监视一个string表达式的数组(也就是说你不需要监视函数,$watchGroup和PSL的解决方案都可以处理),这里有一个替代方法:

$scope.$watch('[number1, number2, myArray]', callback, true);

如果你想建立一个类似于PSL的效用函数:

.run(function($rootScope){
  $rootScope.deepWatchGroup = function(watchExpressions, listener){
    this.$watch('[' + watchExpressions + ']', listener, true);
  }
});
lpwwtiir

lpwwtiir3#

我也遇到了和你一样的问题。
我对这个深层观察组问题的解决方案是:

// Create new object to watch different types of objects
var objectToBeWatch = {
    number1: number1, 
    number2: number2,
    myArray: myArray
};

$scope.$watch(
    function () {
        return objectToBeWatch;
}, callback, true);

我希望这对你有帮助!

相关问题