Como observar profundamente uma matriz em angularjs?

Há uma matriz de objetos no meu escopo, quero observar todos os valores de cada objeto.

Este é o meu código:

function TodoCtrl($scope) {
  $scope.columns = [
      { field:'title', displayName: 'TITLE'},
      { field: 'content', displayName: 'CONTENT' }
  ];
   $scope.$watch('columns', function(newVal) {
       alert('columns changed');
   });
}

Mas quando eu modifico os valores, por exemplo, mudo TITLEpara TITLE2, o alert('columns changed')nunca aparece.

Como observar profundamente os objetos dentro de uma matriz?

Há uma demonstração ao vivo: http://jsfiddle.net/SYx9b/

Você pode definir o terceiro argumento de $watchpara true:

$scope.$watch('data', function (newVal, oldVal) { /*...*/ }, true);

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

Desde o Angular 1.1.x, você também pode usar o $ watchCollection para assistir à exibição rasa (apenas o "primeiro nível") da coleção.

$scope.$watchCollection('data', function (newVal, oldVal) { /*...*/ });

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

Há consequências de desempenho para mergulhar profundamente um objeto no seu $ watch. Às vezes (por exemplo, quando as alterações são apenas push e pop), você pode querer assistir a um valor facilmente calculado, como array.length.

Se você estiver assistindo apenas uma matriz, pode simplesmente usar este pedaço de código:

$scope.$watch('columns', function() {
  // some value in the array has changed 
}, true); // watching properties

exemplo

Mas isso não funcionará com várias matrizes:

$scope.$watch('columns + ANOTHER_ARRAY', function() {
  // will never be called when things change in columns or ANOTHER_ARRAY
}, true);

exemplo

Para lidar com essa situação, costumo converter as várias matrizes que desejo assistir em JSON:

$scope.$watch(function() { 
  return angular.toJson([$scope.columns, $scope.ANOTHER_ARRAY, ... ]); 
},
function() {
  // some value in some array has changed
}

exemplo

Como o @jssebastian apontou nos comentários, JSON.stringifypode ser preferível, angular.toJsonpois ele pode lidar com membros que começam com '$' e também com outros casos possíveis.

Vale a pena notar que no Angular 1.1.xe acima, agora você pode usar $ watchCollection em vez de $ watch. Embora o $ watchCollection pareça criar relógios rasos, ele não funcionará com matrizes de objetos como você espera. Ele pode detectar adições e exclusões na matriz, mas não as propriedades dos objetos dentro das matrizes.

Aqui está uma comparação das três maneiras pelas quais você pode assistir uma variável de escopo com exemplos:

$ watch () é acionado por:

$scope.myArray = [];
$scope.myArray = null;
$scope.myArray = someOtherArray;

$ watchCollection () é acionado por tudo acima AND:

$scope.myArray.push({}); // add element
$scope.myArray.splice(0, 1); // remove element
$scope.myArray[0] = {}; // assign index to different value

$ watch (..., true) é acionado por TUDO acima E:

$scope.myArray[0].someProperty = "someValue";

SÓ MAIS UMA COISA...

$ watch () é o único acionado quando uma matriz é substituída por outra matriz, mesmo que essa outra matriz tenha o mesmo conteúdo exato.

Por exemplo, onde $watch()seria acionado e $watchCollection()não:

$scope.myArray = ["Apples", "Bananas", "Orange" ];

var newArray = [];
newArray.push("Apples");
newArray.push("Bananas");
newArray.push("Orange");

$scope.myArray = newArray;

Abaixo está um link para um exemplo do JSFiddle que usa todas as diferentes combinações de relógios e gera mensagens de log para indicar quais "relógios" foram acionados:

http://jsfiddle.net/luisperezphd/2zj9k872/

$ watchCollection realiza o que você deseja fazer. Abaixo está um exemplo copiado do site da angularjs http://docs.angularjs.org/api/ng/type/$rootScope.Scope Embora seja conveniente, o desempenho precisa ser levado em consideração, especialmente quando você assiste a uma grande coleção.

  $scope.names = ['igor', 'matias', 'misko', 'james'];
  $scope.dataCount = 4;

  $scope.$watchCollection('names', function(newNames, oldNames) {
     $scope.dataCount = newNames.length;
  });

  expect($scope.dataCount).toEqual(4);
  $scope.$digest();

  //still at 4 ... no changes
  expect($scope.dataCount).toEqual(4);

  $scope.names.pop();
  $scope.$digest();

  //now there's been a change
  expect($scope.dataCount).toEqual(3);

Esta solução funcionou muito bem para mim, estou fazendo isso em uma diretiva:

escopo. $ watch (attrs.testWatch, function () {.....}, true);

o true funciona muito bem e reage a todos os objetos (adicionar, excluir ou modificar um campo).

Aqui está um plunker de trabalho para brincar com ele.

Assistindo profundamente uma matriz no AngularJS

Espero que isso possa ser útil para você. Se você tiver alguma dúvida, sinta-se à vontade para perguntar, tentarei ajudar :)

No meu caso, eu precisava assistir a um serviço, que contém um objeto de endereço também assistido por vários outros controladores. Fiquei preso em um loop até adicionar o parâmetro 'true', que parece ser a chave do sucesso ao assistir objetos.

$scope.$watch(function() {
    return LocationService.getAddress();
}, function(address) {
    //handle address object
}, true);

Definir o objectEqualityparâmetro (terceiro parâmetro) da $watchfunção é definitivamente a maneira correta de observar TODAS as propriedades da matriz.

$scope.$watch('columns', function(newVal) {
    alert('columns changed');
},true); // <- Right here

Piran responde isso bem o suficiente e menciona $watchCollectiontambém.

Mais detalhes

O motivo pelo qual estou respondendo uma pergunta já respondida é porque quero ressaltar que a resposta do wizardwerdna não é boa e não deve ser usada.

O problema é que os resumos não acontecem imediatamente. Eles precisam esperar até que o bloco de código atual seja concluído antes de executar. Portanto, assistir o lengthde uma matriz pode realmente perder algumas alterações importantes que $watchCollectionserão detectadas.

Suponha esta configuração:

$scope.testArray = [
    {val:1},
    {val:2}
];

$scope.$watch('testArray.length', function(newLength, oldLength) {
    console.log('length changed: ', oldLength, ' -> ', newLength);
});

$scope.$watchCollection('testArray', function(newArray) {
    console.log('testArray changed');
});

À primeira vista, pode parecer que estes disparariam ao mesmo tempo, como neste caso:

function pushToArray() {
    $scope.testArray.push({val:3});
}
pushToArray();

// Console output
// length changed: 2 -> 3
// testArray changed

Isso funciona bem o suficiente, mas considere isso:

function spliceArray() {
    // Starting at index 1, remove 1 item, then push {val: 3}.
    $testArray.splice(1, 1, {val: 3});
}
spliceArray();

// Console output
// testArray changed

Observe que o comprimento resultante foi o mesmo, mesmo que a matriz tenha um novo elemento e tenha perdido um elemento, portanto, observe o que $watchdiz respeito, lengthnão mudou. $watchCollectionpegou nele, no entanto.

function pushPopArray() {
    $testArray.push({val: 3});
    $testArray.pop();
}
pushPopArray();

// Console output
// testArray change

O mesmo resultado acontece com um push e pop no mesmo bloco.

Conclusão

Para assistir a todas as propriedades da matriz, use $watcha própria matriz com o terceiro parâmetro (objectEquality) incluído e definido como true. Sim, isso é caro, mas às vezes necessário.

Para observar quando o objeto entra / sai da matriz, use a $watchCollection.

NÃO use a $watchna lengthpropriedade da matriz. Quase não há uma boa razão para pensar nisso.