AngularJS: callback dopo il rendering (funziona con DOM dopo il rendering)

Question

Come è possibile eseguire un metodo $scope.myWork() dopo il modello di rendering? Voglio impostare il $scope.value e dopo ho bisogno di cambiare qualcosa con JQuery (ad esempio nel DOM del contenuto del modello). $scope.$watch('value', function(){....}) funziona con il rendering "prima" (il DOM del modello non è ancora disponibile). Grazie.

Answer 1

Creare un directive che esegue il codice nella funzione di collegamento. La funzione di collegamento viene chiamata dopo che il modello è stato creato.

Vedere ng-click per avere un'idea.

Answer 2

Io uso terminal e transclude in una direttiva attributo per chiamare un metodo ambito dopo un modello viene aggiornato e la vista è resa (nel mio caso per ridimensionare un iframe dopo un $ Resource.query):

.directive('postRender', [ '$timeout', function($timeout) { 
var def = { 
    restrict : 'A', 
    terminal : true, 
    transclude : true, 
    link : function(scope, element, attrs) { 
     $timeout(scope.resize, 0); //Calling a scoped method 
    } 
}; 
return def; 
}]) 

Il timeout $ è magia nera. È dovrebbe essere possibile dichiarare il metodo JS come valore di attributo e $ analizzarlo.

per cui uso in un ng-repeat (nel mio caso un albero è reso in modo ricorsivo):

<div post-render ng-repeat="r in regions | orderBy:'name'" ng-include="'tree_region_renderer.html'"> 

Answer 3

Jens risposta di cui sopra funziona, ma si noti che sulle versioni più recenti AngularJS (ad esempio 1.2.3) si non può avere la direttiva postRender in combinazione con ng-repeat come attributi sullo stesso tag poiché entrambi hanno una transclude: true. In tal caso, è necessario rimuovere transclude o disporre di un tag separato con l'attributo direttiva postRender.
Inoltre, si tenga presente la priorità degli attributi quando si utilizza il terminale: true poiché si potrebbe finire per avere un attributo non efficace a causa di uno più priorotizzato sullo stesso tag.

Answer 4

Ho anche avuto questo problema, altre soluzioni non hanno funzionato bene per me, e mi è sembrato il tipo di cosa che il goniometro deve aver risolto. Una rapida revisione di Protractor's client-side scripts mostra che utilizza angular.getTestability(element) per sapere quando effettivamente eseguire i test. Il metodo attende finché non ci sono timeout in sospeso o richieste HTTP e quindi esegue la richiamata. Ecco la mia direttiva:

export function afterRender ($timeout) { 
"ngInject"; 
    return { 
     restrict: 'A', 
     terminal: true, 
     link: function (scope, element, attrs) { 
     angular.getTestability(element).whenStable(function() { 
      console.log('[rendered]'); 
     }); 
     } 
    }; 
} 

Answer 5

Ho trovato questa pagina quando cercavo un modo per profilare il rendering DOM. Ho trovato una soluzione molto semplice che funziona per il mio caso d'uso.

Collegare un gestore di ng-init all'elemento DOM e nella funzione di gestore, utilizzare $ timeout per ottenere l'esecuzione. Esempio:

HTML:

<div ng-init="foo()"> 

JS:

$scope.foo = function() { 
    $timeout(function() { 
     // This code runs after the DOM renders 
    }); 
});