Empêcher la notation à double accolade de s'afficher momentanément avant que angular.js compile / interpole le document

298

Cela semble être principalement un problème dans IE quand il y a un certain nombre d'images / scripts à charger, il peut y avoir une bonne quantité de temps où le littéral {{stringExpression}}dans le balisage est affiché, puis disparaît une fois que l'angulaire est fait avec sa compilation / interpolation de le document.

Y a-t-il une raison commune pour laquelle cela se produirait qui indiquerait que je fais quelque chose de mal en général, ou existe-t-il un moyen connu d'empêcher cela?

angularjs

— JeremyWeir
source

6

Cela pourrait aider: branchandbound.net/blog/web/2013/08/some-angularjs-pitfalls

— Ismael

Ce qui précède était la bonne solution

— Edmund Rojas

283

Je pense que vous recherchez la ngCloakdirective: https://docs.angularjs.org/api/ng/directive/ngCloak

De la documentation:

La directive ngCloak est utilisée pour empêcher le modèle HTML angulaire d'être brièvement affiché par le navigateur dans sa forme brute (non compilée) pendant le chargement de votre application. Utilisez cette directive pour éviter l'effet de scintillement indésirable provoqué par l'affichage du modèle html.

La directive peut être appliquée à l' <body>élément, mais l'utilisation préférée consiste à appliquer plusieurs ngCloak directives à de petites portions de la page pour permettre un rendu progressif de la vue du navigateur

— pkozlowski.opensource
source

1

Pour éviter le code HTML angulaire brut, la pratique est-elle ngCloakrépandue / recommandée? Cela semble être une évidence, mais je ne suis pas expérimenté dans AngularJS.

— Kevin Meredith

32

Je ne pense pas que cela fonctionnera si vous chargez tous les scripts à la fin du corps.

— trusktr

8

Aaah, attendez, nvm, la réponse de LOAS est la solution si vous chargez les scripts en dernier. Utilisez la classe .ng-cloak.

— trusktr

3

Chargez le script angularjs dans la <head>section de votre html pour ngCloakêtre efficace.

— Mustafa

1

Je peux confirmer que cela fonctionne parfaitement si je charge angular.jsdans la <head>section de ma page.

— Aron Lorincz

197

Vous pouvez également utiliser à la place de {{hello}}.

http://jsfiddle.net/4LhN9/34/

— Andrew Joslin
source

94

Une caractéristique de ng-bind qui est parfois négligée est que vous pouvez spécifier le texte à afficher pendant le chargement d'Angular: loading ... . "loading ..." apparaîtra, puis sera remplacé une fois myScopeProperty défini.

— Mark Rajcok

@MarkRajcok: merci pour l'astuce! Je n'en avais aucune idée. C'est très simple et élégant et résout un problème que j'ai moi-même eu.

— Jim Raden

9

Si vous avez besoin de plusieurs expressions, utilisez ngBindTemplate. Par exemple, chargement ...

— Mark Rajcok

27

Vous pouvez également faire {{bonjour || 'chargement ...'}}

— Andrew Joslin

5

@AndyJoslin Nice. Avec cette approche, le script angulaire js doit être dans la tête, par opposition au bas de la page, pour éviter que l'expression {{}} ne clignote lorsque la page se charge.

— s_t_e_v_e

51

Pour améliorer l'efficacité de l'approche class = 'ng-cloak' lorsque les scripts sont chargés en dernier, assurez-vous que le CSS suivant est chargé dans la tête du document:

.ng-cloak { display:none; }

— LOAS
source

4

Ajouter! Important n'est pas non plus une mauvaise idée.

— eomeroff

12

Ce ne serait pas visibility: hiddenmieux?

— mpen

2

@eomeroff, mais !importantest-ce un hack CSS (mauvaise chose) pour promouvoir un style à sélectionner, non? Il casse les règles du sélecteur CSS.

— Kevin Meredith

5

À mon humble avis, c'est l'un des cas! Important a été introduit pour.

— lex82

3

@Mark Je suppose que "visibilité: cachée" rendrait toujours l'espace nécessaire pour le balisage du modèle, alors que "affichage: aucun" ne rend rien du tout. Avec seulement la visibilité cachée, tous les éléments extérieurs peuvent soudainement s'effondrer à la vraie taille intérieure, au lieu de grandir à partir de rien. Je suppose que c'est ce que l'on préfère. :)

— James Wilkins

40

Ajoutez simplement le CSS de masquage en tête de page ou à l'un de vos fichiers CSS:

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

Ensuite, vous pouvez utiliser le directive ngCloak selon la pratique Angular normale, et cela fonctionnera même avant le chargement d'Angular lui-même.

C'est exactement ce que fait Angular: le code à la fin de angular.js ajoute les règles CSS ci-dessus en tête de page.

— Bennett McElwee
source

+1 Je suis moi-même venu avec le [ngcloak]sélecteur, mais c'est plus complet.

— Pierre Henry

1

Réponse géniale! Je charge Angular à la fin de mon corps, donc ngCloak n'est pas disponible et il clignote toujours le {{}}. Cela l'a corrigé.

— Scottie

21

Dans votre CSS, ajoutez ce qui suit

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

Et puis dans votre code, vous pouvez ajouter la directive ng-cloak. Par exemple,

<div ng-cloak>
   Welcome {{data.name}}
</div>

C'est tout!

— Nathan Senevirathne
source

6

Vous pouvez également utiliser à la ng-attr-src="{{variable}}"place de src="{{variable}}"et l'attribut ne sera généré qu'une fois que le compilateur aura compilé les modèles. Ceci est mentionné ici dans la documentation: https://docs.angularjs.org/guide/directive#-ngattr-attribute-bindings

— Martin Schüller
source

3

Je suis d'accord avec la réponse @ pkozlowski.opensource, mais la classe ng-clock n'a pas fonctionné pour moi pour une utilisation avec ng-repeat. Je voudrais donc vous recommander d'utiliser la classe pour une expression de délimiteur simple comme {{name}} et la directive ngCloak pour ng-repeat.

<div class="ng-cloak">{{name}}<div>

et

<li ng-repeat="item in items" ng-cloak>{{item.name}}<li>

— Jaison
source

Merci de m'avoir remarqué l'erreur

— Jaison