Comment puis-je reporter le rendu de l'affichage jusqu'à ce que certaines données sont chargées à partir d'une source externe?

Mon application doit charger des données dans la $rootScope partir d'une source externe lorsqu'il initialise. Puisque les données provenant d'une source externe, le temps nécessaire pour charger les données n'est pas garantie. Je tiens à reporter le rendu de la vue jusqu'à ce qu'une fois les données chargées avec succès. Est-il un moyen pour y parvenir?

Remarque que je ne suis pas à l'aide de l'angle de routage pour cette application.

Ici est un simplifié démo

  • Pourquoi n'êtes-vous pas à l'aide de $http? Nous aurons besoin de quelques infos pour répondre.
  • Je suis à l'aide de $http. C'est juste dans l'exemple de code que j'ai remplacé $http avec $timeout, de sorte que je peux imiter un long délai d'attente et donc de montrer la fin de l'effet contraignant. S'il vous plaît laissez-moi savoir ce que d'autres infos vous êtes à la recherche pour. Frappez-moi avec vos questions. Merci.
  • Vous pouvez également utiliser $watch avec ng-show pour obtenir le résultat souhaité
  • Pourquoi je veux utiliser explicitement $watch quand ng-show est déjà en train de le $watch dans le fond?
  • Oui, vous pouvez utiliser seulement ng-show trop. Mais dans mes applications, je tiens à initialiser les données avec certaines valeurs avant de l'extraction de source externe - donc ng-show ne fonctionne pas pour moi, depuis le de données contient déjà des valeurs juste pas ceux que j'attends. Chose stupide en fait, on pourrait simplement utiliser ng-show sans le besoin d'initialiser - rien de mal là.
  • Laissez-moi savoir si vous avez trouver une alternative. J'ai essayé $scope.$apply(fn) pour encapsuler le code. J'ai aussi essayé d'utiliser $scope.$evalAsync(fn), $timeout(fn, 0) ou certains autres enchaînés promesses. Cet article met en lumière le rendu cycles: jimhoskins.com/2012/12/17/angularjs-and-apply.html
  • dans ce cas, vous parlez, vous pourriez envisager d'utiliser ng-init

InformationsquelleAutor tamakisquare | 2013-04-09
  1. 14

    Il n'y a pas un moyen propre à prévenir la vue de la prestation jusqu'à ce qu'une opération asynchrone se termine sans l'aide de l'itinéraire se résout, mais vous pourriez programme personnalisé directive pour faire le même travail.

    Cependant, si c'est strictement pour l'expérience utilisateur, puis à l'aide ngShow fonctionnerait à merveille:

    <div ng-show="user.name">
  <!-- content won't be visible until data is set -->
</div>

    Voici une mise à jour de Plunker: http://plnkr.co/edit/MXoQNWHvyp9aOXg0QOoC?p=preview

    • Je voudrais mettre à jour ce à dire que ngCloak résout ce genre de problème maintenant: Voir ici: docs.angularjs.org/api/ng/directive/ngCloak il n'est pas nécessaire ngShow
    • Qui pourraient travailler sur chargement initial de la page, mais je ne pense pas que cela fonctionnerait entre chargement de la page.
    • vous êtes correct. Merci de souligner ce point
    InformationsquelleAutor Josh David Miller
  2. 0

    Pour moi, ce n'était pas simplement un problème de l'INTERFACE utilisateur, le scintillement. Parce que les données n'ont pas été chargé avant le rendu, mon bootstrap sélectionnez n'était pas le choix de la valeur de données associée. J'ai été en mesure de résoudre le problème en mettant un "ng-si" dans le conteneur d'emballage le menu déroulant, sélectionnez, comme ci-dessous:

    <div class='bootstrap-select-dropdown-wrapper' ng-if='listofthings.length > 0'>...</div>

    J'espère que cela aide quelqu'un qui est coincé avec un problème similaire (note: j'ai également intégré la nya-bootstrap-sélectionnez le module dans mon projet - bower install nya-bootstrap-select)

    InformationsquelleAutor eugene