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