10

我成功地创建和显示模板，其中使用 AngularJS 从 REST 服务检索到一些数据，但是，当 JSON 响应仍在加载时，浏览器在顶部显示页脚模板，当响应返回 JSON 数据时，页脚转到底部.

这发生得非常快，但页脚模板会在页面顶部闪烁，然后才到底部。

我试过使用 ng-cloak 方法，不幸的是，问题仍然存在。我按照API 参考的建议将 CSS 放到 ng-cloak 中。

这是我的应用程序代码：

<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、页脚以及 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>

不幸的是，在所有这些更改之后，页脚模板在加载完成之前仍然在顶部闪烁。

任何人都可以帮我解决这个问题吗？

是否有任何将页脚放在底部的引导技巧，即使主 div 没有高度？我试过使用 nav-fixed-bottom 标记，但是当页面的高度值较高时，我不想将底部固定在屏幕上。

谢谢！！！

4

3 回答 3

9

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

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

请参阅Angularjs - ng-cloak/ng-show 元素闪烁

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

[ng\:cloak], [ng-cloak], .ng-cloak {
    display: none !important;
}
于 2013-02-18T03:13:32.803 回答
4

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

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

于 2013-02-19T15:44:27.877 回答
4

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

最初，我不显示页脚。

.footer {
  display: none;
}

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

var app = angular.module('app', [...])
.run(function($rootScope) {
    $rootScope.$on('$viewContentLoaded', function(event){
      $('.footer').fadeIn(500);
    });
 });
于 2015-03-24T14:46:03.030 回答