Шаблон нижнего колонтитула мигает даже с помощью ng-cloak в AngularJS

Я успешно создаю и показываю шаблоны с некоторыми данными, полученными из службы REST с помощью AngularJS, но, когда ответ JSON по-прежнему загружается, браузер показывает нижний колонтитул вверху и, когда ответ возвращает данные JSON, нижний колонтитул идет на дно.

Это происходит очень быстро, но шаблон нижнего колонтитула мигает в верхней части страницы, прежде чем перейти к нижней части.

Я пробовал использовать подход ng-cloak, к сожалению, проблема все еще происходит. Я поместил CSS в ng-cloak в качестве API Reference.

Вот мой код приложения:

<body>
  <div data-ng-controller="HeaderCtrl" data-ng-include="'app/partials/header.html'"></div>
  <div data-ng-controller="MenuCtrl" data-ng-include="'app/partials/lista-menu.html'"></div>
  <div ng-view="main" ></div>
  <footer class="nav" data-ng-include="'app/partials/footer.html'" ></footer>

Я пытаюсь поместить ng-плащ в тег body, ng-view, footer, а также внутри html-шаблона ng-view. Этот код представляет все попытки (Примечание. Я пытаюсь использовать отдельно и вместе, с классом ng-cloak и не)

<body ng-cloak class="ng-cloak">
  <div data-ng-controller="HeaderCtrl" data-ng-include="'app/partials/header.html'"></div>
  <div data-ng-controller="MenuCtrl" data-ng-include="'app/partials/lista-menu.html'"></div>
  <div ng-view="main" ng-cloak class="ng-cloak"></div>
  <footer class="nav" data-ng-include="'app/partials/footer.html'" ng-cloak class="ng-cloak"></footer>

К сожалению, после всех этих изменений шаблон нижнего колонтитула все еще мигает сверху до завершения загрузки.

Кто-нибудь может помочь мне исправить это?

Есть ли какой-нибудь трюк Bootstrap, чтобы поместить нижний колонтитул внизу, даже если главный div не имеет высоты? Я пробовал использовать тег nav-fixed-bottom, но я не хочу, чтобы нижняя фиксированная на экране, когда страница имеет высокие значения высоты.

Спасибо!!!

Ответ 1

ng-cloak и/или ng-bind не могут помочь решить эту проблему, потому что это не "вспышка несвязанного контента", проблема. Эти директивы предназначены для скрытия контента до тех пор, пока Angular не сможет скомпилировать HTML.

Проблема, которую вы пытаетесь решить, больше похожа: "Я добавляю материал на страницу динамически, и все перемещается". Если вы хотите показывать нижний колонтитул только после загрузки основного содержимого, мне нравится решение @Alex, представленное в его комментарии.

Ответ 2

Вы дважды проверили, есть ли у вас какие-либо правила CSS, которые могут противоречить правилу ng-cloak? Это может произойти с другими стилями, библиотеками и т.д.

Если у вас есть какие-либо конфликтующие правила, просто добавить display:none; может быть недостаточно.

См. Элементы Angularjs - ng-cloak/ng-show мерцают

Если это так, решение должно использовать! важно преодолеть это:

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

Ответ 3

Как сказал Алекс и Марк, ng-cloak не дает никакой пользы в этом случае. Однако я использовал что-то, что сработало для меня, а также может помочь другим.

Вначале я не показываю нижний колонтитул.

.footer {
  display: none;
}

то после выполнения Angular с загрузкой содержимого появится нижний колонтитул.

var app = angular.module('app', [...])
.run(function($rootScope) {
    $rootScope.$on('$viewContentLoaded', function(event){
      $('.footer').fadeIn(500);
    });
 });