Как смотреть несколько переменных?

У меня есть две переменные $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!');
});

Ответы

Ответ 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
);

Ответ 2

Предложения 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);