Question

我有这段代码

<body>
    <ng-view></ng-view>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script>
    <script src="https://raw.githubusercontent.com/ftlabs/fastclick/master/lib/fastclick.js"></script>
    <script src="js/services.js"></script>
    <script src="js/router.js"></script>
    <script src="js/interceptor.js"></script>
    <script src="js/controller.js"></script>
    <script src="js/app.js"></script>    
</body>

在ng-view中加载

这样的东西

<ng-include src="'templates/navigation.html'"></ng-include>
<ng-include src="'templates/head-bar.html'"></ng-include>
<div id="main">
    <h2>{{ controller.var }}</h2>
    <div ng-show="!controller.othervar" ng-cloak>Text..</div>
</div>

如果我重新加载页面，有时ng-show会闪烁（意味着它会很快显示）。

我尝试了什么

我试过了：

添加ng-cloak标签
将文档的css代码添加到我的样式表
将文档的css代码添加到我的index.html（head-tag）
将脚本标签切换到头部
在另一个浏览器中运行应用程序（我现在已经尝试过Firefox和Safari）

Answer 1

正如documentation中所述，您应该在CSS中添加一条规则，以便根据ng-cloak属性隐藏它：

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

我们在“Built with Angular”网站上使用类似的技巧，您可以在Github上查看源代码：https://github.com/angular/builtwith.angularjs.org

希望有所帮助！

Answer 2

我明白了。 ng-cloak没有错误。

显示/隐藏的变量在$ http响应中设置。如果未定义变量，则隐藏修复我的问题。

感谢所有答案。

AngularJS：ng-show在刷新时闪烁

2 个答案: