Envoi de l'événement lorsque AngularJS fini de charger
Demander quelle est la meilleure façon de détecter l'arrivée de chargement d'une page/d'amorçage, lorsque toutes les directives en fait la compilation/édition de liens.
Tout cas déjà là? Dois-je surcharge le bootstrap fonction?
Vous devez vous connecter pour publier un commentaire.
Juste une intuition: pourquoi ne pas regarder la façon dont les ngCloak la directive est-il? Clairement le ngCloak directive parvient à afficher le contenu après que les choses ont chargé. Je parie que en regardant ngCloak conduira à la réponse exacte...
EDIT 1 heure plus tard:
Ok, eh bien, j'ai regardé ngCloak et c'est vraiment court. Ce que cela implique, bien entendu, est que la compilation de la fonction ne sera pas exécutée jusqu'à ce que {{modèle}} les expressions ont été évalués (c'est à dire le modèle, il chargé), ainsi que la fonctionnalité de nice le ngCloak directive.
Mon estimation serait de simplement faire une directive avec la même simplicité d'ngCloak, puis dans votre compiler la fonction de faire ce que vous voulez faire. 🙂 Place de la directive sur l'élément racine de votre application. Vous pouvez appeler la directive quelque chose comme myOnload et l'utiliser comme un attribut de ma-onload. La compilation en fonction ne s'exécute une fois que le modèle a été compilé (expressions évaluées et sous-modèles chargé).
MODIFIER, 23 heures plus tard:
Ok, j'ai donc fait quelques recherches, et j'ai aussi demandé à ma propre question. La question que j'ai posée était indirectement liés à cette question, mais il coïncidence me conduire à la réponse qui résout cette question.
La réponse est que vous pouvez créer une simple directive et de mettre votre code dans la directive de la fonction de lien, ce qui (pour la plupart des cas, expliqué ci-dessous) sera exécuté lorsque votre élément est prêt/chargé. Basé sur Josh description de l'ordre dans lequel les compiler et lier les fonctions sont exécutées,
De cela, nous pouvons conclure que l'on peut se contenter de faire une directive pour exécuter notre code quand tout est prêt/compilé/lien/chargé:
Maintenant ce que vous pouvez faire est de mettre la ngElementReady directive sur l'élément racine de l'application, et la
console.log
le feu quand il est chargé:C'est simple! Il suffit d'une simple directive et de l'utiliser. 😉
Vous pouvez le personnaliser de sorte qu'il peut exécuter une expression (c'est à dire une fonction) en ajoutant
$scope.$eval($attributes.ngElementReady);
à elle:Alors vous pouvez l'utiliser sur n'importe quel élément:
Assurez-vous d'avoir vos fonctions (par exemple, bodyIsReady et divIsReady) défini dans le champ d'application (contrôleur) de votre élément de la vie en vertu de l'.
Mises en garde: j'ai dit que cela fonctionnera pour plus cas. Être prudent lors de l'utilisation de certaines directives, comme ngRepeat et ngIf. Ils créent leur propre champ d'application, et votre directive ne peut pas le feu. Par exemple, si vous avez mis notre nouveau ngElementReady directive sur un élément qui a également ngIf, et la condition de la ngIf évalue à false, alors notre ngElementReady la directive ne sera pas chargée. Ou, par exemple, si vous avez mis notre nouveau ngElementReady directive sur un élément qui a aussi un ngInclude directive, la directive ne sera pas chargé si le modèle du ngInclude n'existe pas. Vous pouvez obtenir autour de certains de ces problèmes en vous assurant de nest les directives au lieu de les mettre tous sur le même élément. Par exemple, en faisant ceci:
au lieu de cela:
La ngElementReady directive seront compilés dans le dernier exemple, mais c'est fonction de lien ne sera pas exécuté. Remarque: les directives sont toujours compilé, mais le lien avec leurs fonctions ne sont pas toujours exécutées selon certains scénarios, comme ci-dessus.
MODIFIER, quelques minutes plus tard:
Oh, et pour répondre pleinement à la question, vous pouvez maintenant
$emit
ou$broadcast
votre événement à partir de l'expression ou de la fonction qui est exécutée dans leng-element-ready
attribut. 🙂 E. g.:MODIFIER, même plus, quelques minutes plus tard:
@satchmorun réponse fonctionne aussi, mais seulement pour la charge initiale. Voici un très utile DONC, la question qui décrit l'ordre des choses sont exécutés, y compris les fonctions de liaison,
app.run
, et d'autres. Donc, selon votre cas d'utilisation,app.run
pourrait être bon, mais pas pour des éléments spécifiques, auquel cas les fonctions de liaison sont mieux.MODIFIER, cinq mois plus tard, le 17 Oct à 8:11 PST:
Cela ne fonctionne pas avec les partiels qui sont chargés de manière asynchrone. Vous aurez besoin d'ajouter de comptabilité dans votre partiels (par exemple, une façon est de faire de chaque partiel de garder une trace de quand son contenu est fait, le chargement puis émet un événement de sorte que le parent peut compter le nombre de partiels ont chargé et enfin faire ce qu'il doit faire après tous les partiels sont chargés).
MODIFIER, le 23 octobre à 10:52pm PST:
J'ai fait une simple directive pour la cuisson de certains de code lorsque l'image est chargée:
MODIFIER, 24 Oct à 12:48 PST:
J'ai amélioré mon original
ngElementReady
directive et renomméwhenReady
.Par exemple, l'utiliser comme ceci à feu
someFunction
lorsqu'un élément est chargé et{{placeholders}}
pas encore remplacé:someFunction
sera appelée avant tout leitem.property
espaces réservés sont remplacés.Évaluer autant d'expressions que vous voulez, et de faire la dernière expression
true
attendre{{placeholders}}
être évalué comme suit:someFunction
etanotherFunction
sera déclenché après{{placeholders}}
ont été remplacés.Cela ne marche que la première fois qu'un élément est chargé, pas sur les évolutions futures. Il peut ne fonctionne pas comme souhaité si un
$digest
continue à se produire après des espaces réservés ont d'abord été remplacé (a $digest peut se produire jusqu'à 10 fois jusqu'à ce que les données de cesse de changer). Il va être adapté pour une grande majorité de cas d'utilisation.MODIFIER, 31 Oct à 7:26pm PST:
Bon, c'est probablement ma dernière mise à jour. Ce sera sans doute pour 99.999 des cas d'usage là-bas:
L'utiliser comme ceci
Bien sûr, il peut probablement être optimisé, mais je vais en rester là. requestAnimationFrame est agréable.
Dans le docs pour
angulaire.Module
, il y a une entrée décrivant larun
fonction:Donc si vous avez des module qui est votre app:
Vous pouvez exécuter des trucs après que les modules ont chargé de:
EDIT: Manuel de l'Initialisation à la rescousse
Ainsi, il a été souligné que le
run
n'est pas appelée lorsque le DOM est prêt et relié. Elle est appelée lorsque le$injector
pour le module référencé parng-app
a chargé tous ses dépendances, qui est distinct de la DOM étape de compilation.J'ai pris un autre regard sur l'initialisation manuelle, et il semble que cela devrait faire l'affaire.
J'ai fait du violon pour illustrer.
Le HTML est simple:
Note l'absence d'un
ng-app
. Et j'ai une directive qui vont faire de la manipulation du DOM, de sorte que nous pouvons nous assurer de l'ordre et le calendrier de choses.Comme d'habitude, un module est créé:
Et voici la directive:
Nous allons remplacer le
test-directive
balise avec undiv
de classetest-directive
, et l'envelopper de son contenu dans uneh1
.J'ai ajouté de la compilation de la fonction qui renvoie à la fois pré-et post-fonctions de liaison afin que nous puissions voir si ces choses se passent.
Voici le reste du code:
Avant que nous ayons fait quoi que ce soit, il ne devrait pas être des éléments avec une classe de
test-directive
dans les DOM, et après que nous aurons terminé, il devrait être de 1.C'est assez simple. Lorsque le document est prêt, l'appel
angular.bootstrap
avec l'élément racine de votre application et d'un tableau de noms de modules.En fait, si vous attachez un
exécuter
fonctionapp
module, vous verrez qu'il est exécuté avant tout de la compilation a lieu.Si vous exécutez le violon, et de regarder la console, vous verrez suivantes:
run
les feux avant de la directive et quand exécuter des incendies, le html n'est pas tout il y$timeout( initMyPlugins,0)
travaille au sein de mon directive, tout le html, j'ai besoin est làtemplateUrl
Angulaire n'a pas fourni un moyen de signal lorsqu'une page fini de charger, peut-être parce que "fini" dépend de votre application. Par exemple, si vous avez un arbre hiérarchique de partiels, un chargement les autres. "Finish" signifierait que tous d'entre eux ont été chargés. Le cadre aurait un moment difficile l'analyse de votre code et de la compréhension que tout est fait, ou encore attendu sur. Pour cela, vous devez fournir spécifiques à l'application de la logique de vérifier et de déterminer ce que.
Je suis venu avec une solution qui est relativement fidèle à l'évaluation lorsque l'angle d'initialisation est terminée.
La directive est:
Qui peut alors l'être en tant qu'attribut de la
body
élément et ensuite écouté pour l'utilisation de$scope.$on('initialised', fn)
Il fonctionne en supposant que l'application démarre, quand il n'y a pas plus de $digest cycles. $montre est appelée à chaque digérer cycle et donc un timer est démarré (setTimeout pas $timeout donc une nouvelle digérer le cycle n'est pas déclenchée). Si un condensé de cycle ne se produit pas dans le délai, la demande est réputée avoir été initialisée.
Il n'est évidemment pas aussi précis que satchmoruns solution (comme il est possible qu'un digest cycle dure plus longtemps que le délai d'attente), mais ma solution n'a pas besoin de vous pour garder la trace des modules qui le rend beaucoup plus facile à gérer (en particulier pour les grands projets). De toute façon, semble être assez précis pour mes besoins. Espérons que cela aide.
Si vous utilisez Angulaire de l'INTERFACE utilisateur du Routeur, vous pouvez écouter de la
$viewContentLoaded
événement."$viewContentLoaded - tiré une fois que la vue est chargé, après le DOM est rendu. Le "$champ d'application " de la vue émet l'événement." - Lien
j'observe de manipulation du DOM angulaire avec JQuery et j'ai mis une finition pour mon application (une sorte de prédéfinis et satisfaisante de la situation que j'ai besoin pour mon application abstrait) par exemple j'attends mon ng-répéteur pour produire 7 résultat et là, je vais définir une observation de la fonction avec l'aide de la méthode setInterval pour ce but .
Si vous n'utilisez pas ngRoute module, c'est à dire que vous n'avez pas $viewContentLoaded événement.
Vous pouvez utiliser une autre méthode directive:
En conséquence à trusktr réponse il a la priorité la plus basse. Plus $timeout va provoquer Angulaire à travers un ensemble de boucle d'événement avant de rappel d'exécution.
$rootScope utilisé, car il permet de placer la directive dans toute l'étendue de la demande et notifier que nécessaire auditeurs.
En fonction de l'angle de l'équipe et ce Github problème:
Sur cette base, il semble que ce soit actuellement pas possible de le faire de manière fiable, sinon Angulaire aurait fourni l'événement hors de la boîte.
Le démarrage de l'application implique l'exécution de l'digérer cycle sur la racine de la portée, et il n'est pas non plus un recueil de cycle terminé événement.
Selon l'angle de 2 conception docs:
En fonction de cela, le fait que ce n'est pas possible est l'une des raisons pour lesquelles la décision a été prise d'aller pour une réécriture Angulaire 2.
J'avais un fragment qui a été prise en charge dans l'après/par le principal partielle qui est venu dans la via routage.
J'avais besoin pour exécuter une fonction après que subpartial chargé et je n'ai pas envie d'écrire une nouvelle directive et pensé que vous pourriez utiliser un petit
ngIf
Contrôleur de parent partielle:
HTML de subpartial
Si vous voulez générer JS avec des données côté serveur (JSP, PHP), vous pouvez ajouter votre logique pour un service, qui sera chargé automatiquement lors de votre contrôleur est chargé.
En outre, si vous voulez réagir lorsque toutes les directives sont fait la compilation/de liaison, vous pouvez ajouter les solutions proposées ci-dessus dans la logique d'initialisation.
Ce sont tous de grands solutions, Cependant, si vous êtes actuellement à l'aide de Routage puis j'ai trouvé cette solution pour être la plus simple et la moins quantité de code nécessaire. À l'aide de la "résoudre" la propriété d'attendre une promesse à remplir avant le déclenchement de la route. par exemple,
})
Cliquez ici pour la pleine docs - Crédit à K. Scott Allen
peut-être je peux vous aider par cet exemple
Dans la fancybox-je montrer le contenu avec les valeurs interpolées.
dans le service, dans le "ouvrir" fancybox méthode, je ne
l' $compiler renvoie des données compilées.
vous pouvez vérifier les données compilées