Posticipa angularjs guardare l'esecuzione dopo $ digest (evento di raccolta DOM)

Question

Ho un orologio che fa scattare un evento DOM:

scope.$watch(function() { return controller.selected; }, function(selected) { 
    if (selected) { 
     $input.trigger('focus'); 
    } 
}); 

Il problema è che ho un gestore su 'focus' che fa un scope.$apply.

$input.bind('focus', function() { 
    scope.$apply(function() { controller.focused = true; }); 
}); 

Così, quando il mio $watch viene sparato dall'interno di una $digest che causa un errore perché cerca di innescare un altro $digest.

La soluzione temporanea che ho è di mettere il trigger in un $timeout.

scope.$watch(function() { return controller.selected; }, function(selected) { 
    if (selected) { 
     $timeout(function() { $input.trigger('focus'); }); 
    } 
}); 

Questo funziona ... finora. È questo il modo corretto di gestirlo? Non sono sicuro se questo catturi ogni caso e vorrei vedere se c'è un modo approvato angolare per avere un pezzo di codice di rinvio dopo il digest.

Grazie!

Answer 1

$timeout è normalmente ciò che viene utilizzato per eseguire qualcosa dopo un ciclo di digest (e dopo il rendering del browser).

$timeout causerà un altro ciclo di digest da eseguire dopo l'esecuzione della funzione. Se il tuo trigger non ha alcun effetto su Angolare, puoi impostare l'argomento invokeApply su false per evitare di eseguire un altro ciclo di digest.

Se si desidera che il callback da eseguire prima di il browser esegue il rendering: Se il codice è in coda con $evalAsyncda una direttiva, dovrebbe funzionare dopo il DOM è stato manipolato da angolare, ma prima che il browser rende. Tuttavia, se il codice viene accodato utilizzando $evalAsyncda un controller, verrà eseguito prima che il DOM sia stato manipolato da Angular (e prima del rendering del browser). Vedi anche https://stackoverflow.com/a/17303759/215945.

Answer 2

Come tutti continuano a dire, non dovresti fare roba DOM nel controller.

Ecco una soluzione che applica il binding dei dati bidirezionale per mettere a fuoco. Ora il tuo focus è legato a una variabile. Quindi, quando si imposta la variabile su true, si concentra sull'elemento corrispondente e quando l'elemento diventa attivo viene impostata la variabile.

http://plnkr.co/edit/CvPCVxy4MfJEM1UksrrA?p=preview

abbiamo separato oggi con successo l'attenzione dal codice di controllo. Si occupa anche di tutti i problemi di timeout $ (credo). L'unica cosa di cui devi essere consapevole è che non dovresti usare la stessa variabile per legare al fuoco due elementi diversi.

MODIFICA: Aggiornato il plunk poiché il precedente non funzionava correttamente.