Question

我是使用AngularJS从REST服务检索到的一些数据的成功创建和显示模板，但是当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-cloak放在body标签，ng-view，footer以及ng-view html模板内。此代码代表所有尝试（注意：我尝试单独使用，并使用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标签，但是当页面的高度值很高时，我不希望在屏幕上固定底部。

感谢!!!

Answer 1

您是否仔细检查过是否有任何可能与ng-cloak规则冲突的CSS规则？其他样式，库等可能会发生这种情况。

如果您有任何冲突规则，仅添加display:none;可能还不够。

请参阅Angularjs - ng-cloak/ng-show elements blink

如果是这种情况，解决方案是使用！important来克服这个问题：

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

Answer 2

ng-cloak和/或ng-bind无法帮助解决此问题，因为这不是“未编译内容的闪存”问题。这些指令旨在隐藏内容，直到Angular有机会编译HTML。

您要解决的问题更像是：“我正在动态地向页面添加内容，而且正在移动”。如果你想在加载主要内容后才显示页脚，我喜欢@Alex在他的评论中提出的解决方案。

Answer 3

正如Alex和Mark所说，ng-cloak在这种情况下没有任何好处。然而，我使用了一些对我有用的东西，也可以帮助别人。

最初，我没有显示页脚。

.footer {
  display: none;
}

然后在Angular完成加载内容后，会出现页脚。

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

即使在AngularJS中使用ng-cloak，页脚模板也会闪烁

3 个答案: