javascript - tutorial - Ver múltiples atributos de $ scope

manipular objetos html con javascript

Question

¿Hay alguna forma de suscribirse a eventos en múltiples objetos usando $watch

P.ej

$scope.$watch(''item1, item2'', function () { });

Answer 1

¿Por qué no simplemente envolverlo en un forEach ?

angular.forEach([''a'', ''b'', ''c''], function (key) {
  scope.$watch(key, function (v) {
    changed();
  });
});

Se trata de la misma sobrecarga que proporcionar una función para el valor combinado, sin tener que preocuparse realmente por la composición del valor .

Answer 2

A partir de AngularJS 1.1.4 puede usar $watchCollection :

$scope.$watchCollection(''[item1, item2]'', function(newValues, oldValues){
    // do stuff here
    // newValues and oldValues contain the new and respectively old value
    // of the observed collection array
});

Ejemplo de Plunker here

Documentacion here

Answer 3

A partir de AngularJS 1.3 hay un nuevo método llamado $watchGroup para observar un conjunto de expresiones.

$scope.foo = ''foo'';
$scope.bar = ''bar'';

$scope.$watchGroup([''foo'', ''bar''], function(newValues, oldValues, scope) {
  // newValues array contains the current values of the watch expressions
  // with the indexes matching those of the watchExpression array
  // i.e.
  // newValues[0] -> $scope.foo 
  // and 
  // newValues[1] -> $scope.bar 
});

Answer 4

Angular introdujo $watchGroup en la versión 1.3, con lo cual podemos observar múltiples variables, con un solo bloque $watchGroup toma la matriz como primer parámetro en el que podemos incluir todas nuestras variables para observar.

$scope.$watchGroup([''var1'',''var2''],function(newVals,oldVals){
   console.log("new value of var1 = " newVals[0]);
   console.log("new value of var2 = " newVals[1]);
   console.log("old value of var1 = " oldVals[0]);
   console.log("old value of var2 = " oldVals[1]);
});

Answer 5

Aquí hay una solución muy similar a su pseudocódigo original que realmente funciona:

$scope.$watch(''[item1, item2] | json'', function () { });

EDIT: Bueno, creo que esto es aún mejor:

$scope.$watch(''[item1, item2]'', function () { }, true);

Básicamente, nos estamos saltando el paso de json, que al principio parecía tonto, pero no funcionó sin él. La clave es el 3er parámetro que a menudo se omite, que activa la igualdad de objetos en lugar de la igualdad de referencia. Entonces las comparaciones entre nuestros objetos de matriz creados realmente funcionan correctamente.

Answer 6

El primer parámetro de $ watch puede ser una expresión o función angular . Vea la documentación en $scope.$watch . Contiene mucha información útil sobre cómo funciona el método $ watch: cuando se llama watchExpression, cómo Angular compara los resultados, etc.

Answer 7

Puede usar las funciones de $ watchGroup para seleccionar campos de un objeto en el alcance.

        $scope.$watchGroup(
        [function () { return _this.$scope.ViewModel.Monitor1Scale; },   
         function () { return _this.$scope.ViewModel.Monitor2Scale; }],  
         function (newVal, oldVal, scope) 
         {
             if (newVal != oldVal) {
                 _this.updateMonitorScales();
             }
         });

Answer 8

Una solución un poco más segura para combinar valores podría ser usar lo siguiente como su función $watch :

function() { return angular.toJson([item1, item2]) }

o

$scope.$watch(
  function() {
    return angular.toJson([item1, item2]);
  },
  function() {
    // Stuff to do after either value changes
  });

Answer 9

qué tal si:

scope.$watch(function() { 
   return { 
      a: thing-one, 
      b: thing-two, 
      c: red-fish, 
      d: blue-fish 
   }; 
}, listener...);

Answer 10

$watch primer parámetro de $watch también puede ser una función.

$scope.$watch(function watchBothItems() {
  return itemsCombinedValue();
}, function whenItemsChange() {
  //stuff
});

Si sus dos valores combinados son simples, el primer parámetro es simplemente una expresión angular normalmente. Por ejemplo, nombre y apellido:

$scope.$watch(''firstName + lastName'', function() {
  //stuff
});

Answer 11

$scope.$watch(''age + name'', function () {
  //called when name or age changed
});

Aquí se llamará a la función cuando se cambien los valores de edad y nombre.