$ non viene attivato il cambiamento di matrice

Question

Sto cercando di capire perché il mio $watch non viene attivato. Si tratta di un frammento dal controller relativo:

$scope.$watch('tasks', function (newValue, oldValue) { 
    //do some stuff 
    //only enters here once 
    //newValue and oldValue are equal at that point 
}); 

$scope.tasks = tasksService.tasks(); 

$scope.addTask = function (taskCreationString) { 
    tasksService.addTask(taskCreationString);//modifies tasks array 
}; 

Sul mio punto di vista, tasks è chiaramente in fase di aggiornamento in modo corretto, come ho legato la sua lunghezza in questo modo:

<span>There are {{tasks.length}} total tasks</span> 

Che cosa mi manca?

Answer 1

Prova $watch('tasks.length', ...) o $watch('tasks', function(...) { ... }, true).

Per impostazione predefinita, $watch non verifica l'uguaglianza dell'oggetto, ma solo per riferimento. Quindi, $watch('tasks', ...) restituirà sempre lo stesso riferimento di array, che non sta cambiando.

Aggiornamento: v1.1.4 angolare aggiunge un metodo $watchCollection() per gestire questo caso:

Shallow guarda le proprietà di un oggetto e incendi ogniqualvolta qualsiasi delle proprietà cambia (per array questo implica monitorando l'array oggetti, per le mappe oggetto ciò implica la visione delle proprietà). Se viene rilevata una modifica, viene attivato il callback listener.

Answer 2

Risposta molto buona da @Mark. Oltre alla sua risposta, c'è una funzionalità importante della funzione $watch di cui dovresti essere a conoscenza.

Con la dichiarazione $watch funzione come segue:

$watch(watch_expression, listener, objectEquality) 

La funzione $watchascoltatore viene chiamato solo quando il valore della corrente orologio espressione (nel tuo caso è 'tasks') e la chiamata precedente a l'espressione dell'orologio non è uguale. Angolare salva il valore dell'oggetto per un confronto successivo. Per questo motivo, la visione di opzioni complesse avrà implicazioni di memoria e prestazioni svantaggiose. Fondamentalmente il più semplice espressione orologio e meglio è.

Answer 3

Vorrei consigliamo di provare

$scope.$watch('tasks | json', ...) 

che cattura tutte le modifiche alla matrice tasks, in quanto mette a confronto l'array serializzato come stringa.

Answer 4

Per uno matrici tridimensionali è possibile utilizzare $watchCollection

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

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