Ng-cloak и ng-show мигают скрытый элемент на экране
У меня есть элемент div, который я хочу показывать только тогда, когда мой список элементов пуст. Поэтому я добавил следующее (в haml):
#no-items.ng-cloak{ :ng_show => "items.length <= 0", :ng_cloak => true }
Однако даже после того, как я сделал это, элемент все еще мигает на экране. Затем я увидел элементы Angularjs - ng-cloak/ng-show, но даже после добавления в моем CSS стирания все еще происходит.
[ng\:cloak], [ng-cloak], .ng-cloak {
display: none !important;
}
Любые идеи, что я делаю неправильно?
Ответы
Ответ 1
Вы можете поместить ng-hide в класс, не влияя на то, как JS будет работать после загрузки. Тем не менее, полезно поместить его туда, чтобы CSS учитывал это во время ожидания загрузки JS.
<div data-ng-controller="RoomsController">
<div ng-cloak class="ng-cloak ng-hide" data-ng-if="visible" >
Some text
</div>
</div>
Ответ 2
Убедитесь, что в начале вашей страницы загружается CSS-плейер ng-cloak.
Это должно быть все, что вам нужно сделать:
<div ng-hide="items.length" ng-cloak>no items</div>
Пример fiddle.
Ответ 3
Ни один из решений не работал у меня. Единственное решение, которое я нашел, следующее:
В каждом контроллере добавьте:
$scope.$on('$viewContentLoaded', function () {
$scope.completed = true;
});
и в html каждого представления добавьте ng-if = "completed" к самому верхнему элементу. Например:
<div ng-if="completed">
Примечание. Проблема ограничена firefox и ui-router. Там ng-cloak игнорируется, и обходное решение css отсутствует. Единственное решение, которое сработало для меня, - это тот, который я дал выше.
Ответ 4
В настоящее время для этого существует открытая проблема:
https://github.com/angular/angular.js/issues/14015
Этот обходной путь работал у меня:
.ng-hide.ng-hide-animate {
display: none !important;
}