Alternative à ng-show/-hide ou comment charger uniquement la section pertinente du DOM

Question

Lorsque vous utilisez ng-show/-hide, le contenu inclus dans ces blocs s'affiche initialement sur l'écran de l'utilisateur. Ce n'est qu'après quelques millisecondes (après le chargement et l'exécution d'angular.js) que le bon bloc s'affiche dans ng-show.

Existe-t-il un meilleur moyen que ng-show/-hide pour charger uniquement la section pertinente des données dans le DOM ?

Le problème avec ng-view est que je ne peux en avoir qu'un seul sur la page, et que je dois donc basculer le comportement de nombreuses sections du DOM en fonction de l'état actuel.

Answer 1

Pour éviter le " flash du contenu non compilé ", utilisez ng-bind au lieu de {{}} ou utiliser ng-cloak :

<span ng-cloak ng-show="show">Hello, {{name}}!</span>

Si vous utilisez ng-cloak, et que vous ne chargez pas Angular.js dans la section head de votre HTML, vous devrez ajouter ceci à votre fichier CSS, et vous assurer qu'il se charge en haut de votre page :

[ng\:cloak], [ng-cloak], .ng-cloak { display: none; }

Notez que vous ne devez utiliser ces directives que sur votre page initiale. Le contenu qui est ajouté ultérieurement (par exemple, via ng-include, ng-view, etc.) sera compilé par Angular avant le rendu par le navigateur.

Existe-t-il un meilleur moyen de charger des données que ng-show / hide, dans lequel seule la section pertinente est chargée dans le DOM.

Quelques alternatives à ng-show/ng-hide sont ng-include , ng-switch et (depuis la v1.1.5) ng-if :

<div ng-include src="someModelPropertySetToThePartialYouWantToLoadRightNow"></div>

Voir aussi https://stackoverflow.com/a/12584774/215945 pour un exemple de ng-switch fonctionnant avec ng-include.

Notez que ng-switch et ng-if ajoutent/suppriment des éléments DOM, tandis que ng-show/hide ne modifie que le CSS (si cela vous importe).

Answer 2

J'ai utilisé le truc du ng-cloak et ça n'a pas l'air de marcher si bien que ça. En suivant la documentation Angular, j'ai ajouté ce qui suit à mon CSS et cela fonctionne :

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}

Voir : http://docs.angularjs.org/api/ng.directive:ngCloak

Answer 3

Selon l'excellente réponse de Mark Rajcok, voici la réponse suivante un CodePen montrant ng-show, ng-switch et ng-if en action, afin que vous puissiez comparer les approches et voir les différences dans la façon dont le contenu conditionnel est effectivement rendu.

Notez que certaines personnes estiment que ng-show est un peu plus rapide que ng-switch et ng-if pour les modèles basés sur des fichiers. Mais vous pouvez utiliser $templateCache pour précharger vos modèles au moment du démarrage, ce qui réduit ou élimine cet avantage. Grâce à ng-switch et ng-if, vous n'avez plus à vous soucier de la présence de contenu conditionnel caché dans le DOM lorsqu'il n'est pas nécessaire, et vous évitez que les expressions sur ce contenu soient évaluées par Angular à des moments inopportuns. Cela vous permet d'économiser des ressources de traitement dont vous n'avez pas besoin et d'éviter les erreurs qui peuvent survenir lorsque quelque chose est évalué prématurément.