一尘不染

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

angularjs

我已经成功创建并显示了模板,并使用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没有高度,是否有任何Bootstrap技巧将页脚放在底部?我尝试使用nav-fixed-
bottom标记,但是当页面具有高高度值时,我不想在屏幕上固定底部。

谢谢!!!


阅读 168

收藏
2020-07-04

共1个答案

一尘不染

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

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

2020-07-04