12

我确实有两个$scope变量。它们被称为$scope.image$scope.titleimage

基本上存储相同类型的内容。我想现在跟踪其中任何一个更新。但到目前为止,我无法弄清楚如何在单个$scope.$watch()回调中跟踪两个变量。

// How can I watch titleimage here as well?
$scope.$watch('image', function(media) {
    console.log('Media change discoverd!');
}); 
4

4 回答 4

31

$watch方法接受一个函数作为第一个参数(在字符串旁边)。 $watch将“观察”函数的返回值,并在返回值发生更改时调用 $watch 侦听器。

$scope.$watch(
  function(scope){
    return {image: scope.image, titleImage: scope.titleImage};
  }, 
  function(images, oldImages) {
    if(oldImages.image !== images.image){
      console.log('Image changed');
    }
    if(oldImages.titleImage !== images.titleImage){
      console.log('titleImage changed');
    }
  }, 
  true
); 

此外,您可能会观察到一个连接值,但这不会让您知道哪个观察到的值实际发生了变化:

$scope.$watch('image + titleImage',
  function(newVal, oldVal) {
    console.log('One of the images have changed');
  }
); 

您还可以查看一系列范围变量:

$scope.$watch('[image, titleImage]',
  function(images, oldImages) {
    if(oldImages[0] !== images[0]){
      console.log('Image changed');
    }
    if(oldImages[1] !== oldImages[1]){
      console.log('titleImage changed');
    }
  },
  true
); 
于 2013-07-09T14:38:21.747 回答
16

Stewie 的建议会奏效。但是有一千种方法可以剥这只猫的皮。我认为,如果您正在观看两个单独的值,那么为它们设置两个具有共享功能的手表并没有错:

函数式编程来拯救!

使用函数创建函数很棒。

function logChange(expr) {
   return function(newVal, oldVal) {
      console.log(expr+ ' has changed from ' + oldVal + ' to ' + newVal);
   };
}

$scope.$watch('image', logChange('image'));
$scope.$watch('titleImage', logChange('titleImage'));

或者......您甚至可以将手表设置包装在它自己的功能中(更不令人兴奋,IMO):

function logChanges(expr) {
   $scope.$watch(expr, function(newVal, oldVal) {
      console.log(expr+ ' has changed from ' + oldVal + ' to ' + newVal);
   });
};

logChanges('image');
logChanges('titleImage');

..但我有一千个,你说?

//assuming the second function above
angular.forEach(['image', 'titleimage', 'hockeypuck', 'kitchensink'], logChanges);
于 2013-07-09T15:38:05.420 回答
0

正确答案在这里找到:

https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watchCollection

“对于数组,这意味着查看数组项;对于对象映射,这意味着查看属性”

例子:

$scope.$watchCollection(function () {
    return {t : ctrl.time, d : ctrl.date};
}, function(value) {
    ctrl.updateDateTime();
});
于 2020-01-18T18:14:59.703 回答
0

使用计算并返回要侦听的数组中的多个变量,这些变量应该执行相同的函数。

computed: {
  photo () {
    return [this.image, this.title]
  }
},
watch: {
  photo () {
    console.log('changed')
  }
},
于 2019-02-18T11:15:16.940 回答