Angular Watch e sequenza di eventi ng-

Question

Ho questo codice all'interno di una direttiva angolare, e trovo il comportamento di $ Watch un po 'confuso. L'updateSelect si chiama in un "ng-click":

scope.updateSelect = function (type) { 
    scope.selectionCtrl.activeList = scope.seedLists[type]; 
    scope.selectionCtrl.activeListKey = type; 
    scope.selectionCtrl.activeSelection = scope.selection[type]; 
    scope.selectionCtrl.staged = []; 
    scope.selectionCtrl.stageRemove = []; 
    if (type !== scope.activeTab) { 
     scope.activeTab = type; 
    } 
    console.log("update"); 
}; 

scope.$watch('selectionCtrl.activeList', function(newValue, oldValue) { 
    console.log("watch"); 
}, true); 

Quando clicco sul pulsante (trigger updateSelect), e guardo il console, che vedo "update" e poi "guardare". La prima cosa che accade all'interno della funzione è selectionCtrl.activeList, quindi mi aspetto di vedere "watch" e quindi "update".

Non dovrebbe guardare il trigger non appena la matrice è cambiata?

Answer 1

La funzione deve finire prima poiché javascript è a thread singolo.

Poiché la funzione è stata chiamata tramite la direttiva ng-clic, angular eseguirà un ciclo di digest. Parte di questo ciclo di digest è quello di scorrere l'elenco di controllo e risolvere tutte le modifiche che potrebbero essersi verificate dall'ultima esecuzione del ciclo.

Nell'esempio che si preme, selectionCtrl.activeList viene modificato in updateSelect, il che provoca il richiamo del callback dell'orologio.

Answer 2

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

Il watchExpression è chiamato ogni chiamata a $ digerire() e dovrebbe restituire il valore che verrà guardato. (Dal $ digest() repliche quando rileva cambia il watchExpression in grado di eseguire più volte al $ digest() e deve essere idempotente.)

Se si tenta cioè:

scope.selectionCtrl.activeList = scope.seedLists[type]; 
scope.$digest(); 

si otterrà errore: [$ rootScope: inprog] $ applica già in corso.

Answer 3

Quando si esegue la richiamata di Angular watch?

È correlato a $digest e $apply e sicuramente non viene eseguito all'interno del codice javascript non elaborato.

Per rendere watch eseguire con forza, è possibile eseguire $scope.apply() manualmente, ma può causare più problemi e non è necessaria se è all'interno di una funzione angularjs, vale a dire $ timeout, $ di intervallo, ecc, perché sarà chiamato automaticamente dopo la funzione .

Per ulteriori informazioni, ricerca;

• How do I use $scope.$watch and $scope.$apply in AngularJS?
• https://groups.google.com/forum/#!topic/angular/HnJZTEXRztk