it-swarm.com.ru

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

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

Метод $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
); 
29
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);
15
Ben Lesh

Используйте computed и вернуть несколько переменных в массиве, который вы хотите прослушать, который должен выполнять одну и ту же функцию.

computed: {
  photo () {
    return [this.image, this.title]
  }
},
watch: {
  photo () {
    console.log('changed')
  }
},
0
EnzoTrompeneers