angularjs - 如何$watch多个变量？

Question

我确实有两个 $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!');
}); 

Answer 1

$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
);