ng-cover und ng-show blinkt das verdeckte Element auf dem Bildschirm

Question

Ich habe ein div-Element, das ich nur zeigen möchte, wenn meine Liste der Elemente leer ist. Also habe ich in den folgenden (in haml):

#no-items.ng-cloak{ :ng_show => "items.length <= 0", :ng_cloak => true } 

Aber auch nachdem ich getan habe, dass das Element nach wie vor auf dem Bildschirm blinkt. Dann sah ich Angularjs - ng-cloak/ng-show elements blink, aber selbst nach dem Hinzufügen der folgenden in meinem CSS, das Blinken immer noch auftritt.

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

Irgendwelche Ideen, was ich falsch mache?

Answer 1

Stellen Sie sicher, dass das oben abgebildete ng-cover-CSS am Anfang Ihrer Seite geladen wird.

Dies sollte alles, was Sie tun müssen, ist:

<div ng-hide="items.length" ng-cloak>no items</div> 

Probe .

Answer 2

Sie können ng-hide in die Klasse einfügen, ohne zu beeinflussen, wie das JS nach dem Laden funktioniert. Es ist jedoch nützlich, es dort zu platzieren, so dass CSS es berücksichtigt, während es darauf wartet, dass das JS geladen wird.

<div data-ng-controller="RoomsController"> 
<div ng-cloak class="ng-cloak ng-hide" data-ng-if="visible" > 
    Some text 
</div>   
</div> 

Answer 3

Keine der Lösungen funktionierte für mich. Die einzige Lösung, die ich gefunden, ist die folgende:

In jedem Controller fügen:

$scope.$on('$viewContentLoaded', function() { 
      $scope.completed = true; 
});    

und in den HTML-Code jeder Ansicht, fügen ng- if = "abgeschlossen" an das oberste Element. Zum Beispiel:

<div ng-if="completed"> 

Hinweis: das Problem zu firefox und ui-Router beschränkt ist. Dort wird ng-cover ignoriert und es gibt keine CSS-Problemumgehung. Die einzige Lösung, die für mich funktionierte, ist diejenige, die ich oben gegeben habe.

Answer 4

Es gibt derzeit eine offene Frage hierzu: https://github.com/angular/angular.js/issues/14015

Diese Problemumgehung für mich gearbeitet:

.ng-hide.ng-hide-animate { 
    display: none !important; 
}