当前位置: 首页 > 面试题库 >

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

申颖逸
2023-03-14
问题内容

我已经成功创建并显示了模板,并使用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标记,但是当页面具有高高度值时,我不想在屏幕上固定底部。

谢谢!!!


问题答案:

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

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



 类似资料:
  • 问题内容: 我在angular.js中有指令/类或问题。 Chrome可以正常运行,但是Firefox会通过或导致元素闪烁。恕我直言,它是由引起的转换/ 到,可能是Firefox的JavaScript编译器是有点慢,所以元素出现了一会儿,然后躲起来? 例: 问题答案: 尽管文档中没有提到它,但是将规则添加到CSS 可能还不够。如果您要在主体中加载angular.js或模板编译得不够快,请使用指令,

  • 问题内容: 我正在尝试渲染文件。该文件存在于我的项目中,但是当我尝试渲染它时,我一直在获取文件。Flask为什么找不到我的模板? 问题答案: 必须在正确的位置创建模板文件。在你的python模块旁边的子目录中。 该错误表明目录中没有文件。确保在与模块相同的目录中创建了该目录,并且确实将文件放在该子目录中。如果你的应用是软件包,则应在软件包内创建模板文件夹。 另外,如果你将模板文件夹命名为templ

  • 问题内容: 我想加载一个内联视图模板。 我将模板包装在类型为的脚本标签中,并将ID设置为。这是我的模块配置 它在控制台窗口中告诉我,这意味着它正在寻找该名称的文件。 我的问题是:如何配置路由以使用嵌入式模板? 更新:这是我的服务器渲染的DOM的样子 问题答案: Ody,您的方向正确,唯一的问题是标记位于使用指令的DOM元素 之外。如果将其移至元素,则内联模板应该可以使用。

  • 问题内容: 我正在尝试渲染文件。该文件存在于我的项目中,但是当我尝试渲染它时,我一直在获取文件。Flask为什么找不到我的模板? 问题答案: 你必须在正确的位置创建模板文件。在你的模块旁边的子目录中。 该错误表明目录中没有文件。确保在与python模块相同的目录中创建了该目录,并且确实将文件放在该子目录中。如果你的应用是软件包,则应在软件包内创建模板文件夹。 另外,如果你将模板文件夹命名为而不是其

  • 问题内容: 我有一些特定于视图的脚本。但是,当angularjs加载视图时,该脚本似乎没有执行。 Index.html Main.html- 在ng-view下加载 在此示例中,当页面加载时,我看到网站上印有一个基本的hello世界。但是,我没有弹出任何消息说“你好,约翰”。 知道为什么我无法加载特定于某个视图的脚本吗? 额外信息 app.js 控制器/main.js 问题答案: 这就是 jqLi

  • 问题内容: 我正在尝试使用AngularJS youtube频道上的演讲中所述的AngularJS创建启动屏幕?t= 10m20s 它使用ng-cloak指令。这是HTML: 和CSS: 这是一个小提琴:http : //jsfiddle.net/TimFogarty/LaBvW/2/ 在小提琴中,启动div并没有像讲话中所说的那样消失。这段代码有什么问题吗?我做错了吗?如何实现此初始屏幕? 问题