Angularjs - ng-manteau/ng-Afficher éléments blink

Question

J’ai une question à angularjs avec la directive/classe ng-manteau ou ng-show.

Chrome fonctionne très bien, mais Firefox est à l’origine clin d’éléments avec [ng-manteau] ou [ng-show]. Mon humble avis, elle est causée par la conversion [ng-manteau] / [ng-show] style = "afficher : none ; », probablement le compilateur javascript de FF est un peu plus lentement, donc les éléments apparaît pendant un certain temps et puis masquer ?

Exemple :

Je vous serais reconnaissant des conseils ou une aide, il est très ennuyeux,

Answer 1

Si la documentation ne mentionne pas, c'est peut-être pas assez pour ajouter l' display: none; règle CSS. Dans le cas où vous sont en cours de chargement angular.js dans le corps ou les modèles ne sont pas compilés assez vite, utilisez l' ng-cloak directive et inclure les éléments suivants dans votre CSS:

/* 
  Allow angular.js to be loaded in body, hiding cloaked elements until 
  templates compile.  The !important is important given that there may be 
  other selectors that are more specific or come later and might alter display.  
 */
[ng\:cloak], [ng-cloak], .ng-cloak {
  display: none !important;
}

Comme mentionné dans le commentaire, l' !important est important. Par exemple, si vous avez le balisage suivant

<ul class="nav">
  <li><a href="http://stackoverflow.com/foo" ng-cloak>{{bar}}</a></li>
</ul>

et vous arrive d'être en utilisant bootstrap.css, le sélecteur suivant est plus spécifique pour votre ng-cloak'ed élément

.nav > li > a {
  display: block;
}

Donc, si vous incluez une règle simplement d' display: none;, Bootstrap, la règle de préséance et de l' display sera mis à l' block, de sorte que vous allez voir le scintillement de l'avant le modèle de compile.

Answer 2

Comme mentionné dans la documentation, vous devez ajouter une règle CSS pour cacher basé sur l' ng-cloak d'attribut:

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

Nous utilisons des astuces similaires sur le "Construit Angulaire" du site, vous pouvez voir la source sur Github: https://github.com/angular/builtwith.angularjs.org

Espérons que ça aide!

Answer 3

Assurez-vous que AngularJS est inclus dans le `` du HTML. Voir doc ngCloak:

Pour un résultat optimal, le script de angular.js doit être chargé dans la section head du fichier html ; par ailleurs, la règle css (ci-dessus) doit figurer dans la feuille de style externe de l’application.

Answer 4

Je n'ai jamais eu beaucoup de chance en utilisant ngCloak. Je reçois toujours vacillante, en dépit de tout ce qui est mentionné ci-dessus. Le seul moyen infaillible pour éviter le claquement est de mettre votre contenu en un modèle et d'inclure le modèle. Dans un SPA, le seul HTML qui sera évalué avant d'être compilé par Angulaire est votre principale index.html page.

Il suffit de prendre à l'intérieur tout le corps et de le coller dans un fichier distinct, puis:

<ng-include src="'views/indexMain.html'"></ng-include>

Vous ne devriez jamais obtenir toute scintillante de cette façon que Angulaires de compiler le modèle avant de l'ajouter au DOM.

Answer 5

ngBind et ngBindTemplate sont des alternatives qui ne nécessitent pas de CSS:

 <div ng-show="foo != null" ng-cloak>{{name}}</div>  <!-- requires CSS -->
<div ng-show="foo != null" ng-bind="name"></div>
<div ng-show="foo != null" ng-bind-template="name = {{name}}"></div>