javascript - Angularjs - elemente ng-cloak/ng-show clipesc

Am o problemă în angular.js cu directiva/clasa ng-cloak sau ng-show.

Chrome funcționează bine, dar Firefox provoacă clipirea elementelor cu ng-cloak sau ng-show. după părerea mea, este cauzat de conversia ng-cloak/ng-show în style="display: none;", probabil că compilatorul JavaScript din Firefox este puțin mai lent, așa că elementele apar pentru o vreme și apoi se ascund?

Exemplu :

<ul ng-show="foo != null" ng-cloak>..</ul>

Răspuns #1

Deși documentația nu menționează acest lucru, s-ar putea să nu fie suficient să adaugi regula display: none; în CSS-ul tău. În cazurile în care încarci angular.js în body sau șabloanele nu sunt compilate suficient de repede, folosește directiva ng-cloak și include următoarele în CSS-ul tău:

/* 
  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;
}

Așa cum s-a menționat în comentariu, !important este important. De exemplu, dacă aveți următorul markup

<ul class="nav">
  <li><a href="/foo" ng-cloak>{{bar}}</a></li>
</ul>

și se întâmplă să folosești bootstrap.css, următorul selector este mai specific pentru elementul tău ng-cloak

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

Deci, dacă incluzi o regulă cu simplu display: none;, regula Bootstrap va avea prioritate și display va fi setat la block, așa că vei vedea clipirea înainte ca șablonul să fie compilat.

Răspunsul #2

Așa cum este menționat în documentație, ar trebui să adăugați o regulă în CSS-ul dvs. pentru a o ascunde bazându-vă pe atributul ng-cloak:

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

Folosim trucuri similare pe site-ul „Built with Angular”, al cărui cod sursă îl puteți vedea pe Github: https://github.com/angular/builtwith.angularjs.org

Sper că asta ajută!

Răspunsul #3

Asigurați-vă că AngularJS este inclus în head al HTML-ului. Consultați documentația ngCloak:

Pentru cel mai bun rezultat, scriptul angular.js trebuie încărcat în secțiunea head a fișierului html; alternativ, regula css (de mai sus) trebuie inclusă în fișierul extern de stil al aplicației.

Răspunsul #4

Nu am avut niciodată prea mult noroc folosind ngCloak. Încă văd pâlpâiri în ciuda tuturor lucrurilor menționate mai sus. Singura modalitate sigură de a evita pâlpâirea este să pui conținutul într-un șablon și să incluzi șablonul. Într-o SPA, singurul HTML care va fi evaluat înainte de a fi compilat de Angular este pagina ta principală index.html.

Doar ia tot ce este în interiorul corpului și pune-l într-un fișier separat și apoi:

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

Nu ar trebui să apară niciodată vreo pâlpâire astfel, deoarece Angular va compila șablonul înainte de a-l adăuga în DOM.

Răspunsul #5

ngBind și ngBindTemplate sunt alternative care nu necesită 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>

Răspunsul #6

În plus față de răspunsul acceptat, dacă folosești o metodă alternativă de declanșare a ng-cloak...

De asemenea, s-ar putea să doriți să adăugați câteva specificații suplimentare la CSS/LESS-ul dvs.:

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

Răspunsul #7

Am avut o problemă similară și am descoperit că dacă ai o clasă care conține tranziții, elementul va clipi. Am încercat să adaug ng-cloak fără succes, dar prin eliminarea tranziției butonul a încetat să mai clipească.

Folosesc framework-ul Ionic și button-outline are această tranziție

.button-outline {
  -webkit-transition: opacity .1s;
  transition: opacity .1s;
}

Pur și simplu suprascrieți clasa pentru a elimina tranziția și butonul va înceta să mai clipească.

Actualizare

Din nou, pe Ionic apare o pâlpâire atunci când se folosește ng-show/ng-hide. Adăugarea următorului CSS o rezolvă:

.ng-hide-add,
.ng-hide-remove {
  display: none !important;
}

Sursa: http://forum.ionicframework.com/t/beta-14-ng-hide-show/14270/9