AngularJS : Comment faire pour exécuter du code supplémentaire une fois AngularJS a rendu un modèle ?

Question

J'ai Angulaire du modèle dans les DOM. Lors de mon contrôleur reçoit de nouvelles données à partir d'un service, il met à jour le modèle dans le $scope, et re-rend le modèle. Tout bon jusqu'ici.

Le problème est que je dois aussi faire un travail supplémentaire après le modèle a été re-rendus et dans les DOM (dans ce cas, un plugin jQuery).

Il semble qu'il devrait y avoir un événement à écouter, comme AfterRender, mais je ne trouve pas une telle chose. Peut-être une directive serait une façon de faire, mais il semblait à feu trop tôt.

Voici un jsFiddle décrivant mon problème: Violon-AngularIssue

== Mise à JOUR ==

Basé sur les commentaires, j'ai donc passé à une directive de la poignée de manipulation du DOM, et mis en œuvre un modèle de $regarder à l'intérieur de la directive. Cependant, je suis encore en ayant le même problème; le code à l'intérieur de $regarder événement se déclenche avant que le modèle a été compilé et inséré dans les DOM, par conséquent, le plugin jquery est toujours de l'évaluation d'une table vide.

Fait intéressant, si je supprime l'appel asynchrone le tout fonctionne très bien, donc c'est un pas dans la bonne direction.

Voici ma mise à jour de Violon pour tenir compte de ces changements: http://jsfiddle.net/uNREn/12/

Answer 1

Tout d’abord, le bon endroit pour salir avec rendu sont des directives. Mon Conseil serait d’envelopper DOM manipulant des plugins jQuery de directives comme celui-ci.

J’ai eu le même problème et est venu avec cet extrait de code. Il utilise et pour s’assurer que votre code s’exécute après directives comme ont été résolus et modèles comme suis rendu.

Espérons que cela peut vous aider à prévenir certains lutte.

Answer 2

Ce post est vieux, mais j’ai modifier votre code pour :

Voir : http://jsfiddle.net/dnzY9/

J’espère que ça aide vous

Answer 3

Suivant Misko du conseil, si vous voulez opération asynchrone, alors au lieu de $timeout() (qui ne fonctionne pas)

$timeout(function () { $scope.assignmentsLoaded(data); }, 1000);

utiliser $evalAsync() (qui fonctionne)

$scope.$evalAsync($scope.assignmentsLoaded(data));

Le violon. J'ai aussi ajouté un "supprimer la ligne de données" lien qui vous permettra de modifier $champ d'application.les affectations, la simulation d'un changement de données/modèle-pour indiquer que la modification de données fonctionne.

L' Exécution de la section de l'Aperçu Conceptuel page explique que evalAsync devrait être utilisé lorsque vous avez besoin de quelque chose pour se produire à l'extérieur de la trame de pile, mais avant le rend navigateur. (Deviner ici... "current frame de pile" comprend probablement Angulaire DOM mises à jour.) Utiliser $timeout si vous besoin de quelque chose de se produire après la rend navigateur.

Cependant, comme vous l'avez déjà trouvé, je ne pense pas qu'il existe un besoin pour une opération asynchrone ici.

Answer 4

Je pense que vous êtes à la recherche pour $evalAsync http://docs.angularjs.org/api/ng.$rootScope.Scope#$evalAsync

Answer 5

Finalement j’ai trouvé la solution, j’utilisais un service REST pour mettre à jour ma collection. Afin de convertir la datatable jquery est le code de suivi :