Angular打开页面显示表达式如何解决？
发布于 9 年前 作者 yukjin 14394 次浏览 最后一次编辑是 8 年前 来自 问答

比如下面代码：

<!DOCTYPE html>
<html>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js"></script>
<script src="myApp.js"></script>
<script src="myCtrl.js"></script>

</body>
</html>

如何网速比较慢的话，打开页面的时候会显示{{ firstName + " " + lastName }}在页面上，然后才会被真正的值替换，我看到我们的前端写的页面都有这样的问题，他说这是angular的bug，我想确认下，如果不是，请问如何解决？

10 回复

是不是你的{{}}本身就有模板解析？？ （1）如果是，可以将angular的模板解析标识变为其他，比如{{}} --> {{[]}}

@TimothyJin 没有其他模板解析，上面代码例子见 W3C Angularjs教程

我想是因为页面首先加载html，然后angular才会解析里面的表达式，所以会在加载缓慢的情况下会表达式会被看到，不知道angular本身有没有解决方案。

不是bug,像这种 情况下你要用ng-bind,或者ng-model。angularjs有说明的。

用 ng-bind 在 angular 渲染完毕后再显示数据

三楼四楼绝对正解，官方有说明的~~

是时候重新评估你们前端的能力了

ng-cloak

ng-bind

加上ng-cloak指令 再声明其样式，诸如[ng-cloak] {display: none;} 参见官方说明 ngCloak

几种方法 官方有说

1 使用 ng-cloak, 同时要在css加入一行 [ng-cloak] {display: none;} 样式 [ng:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; } 我现在就用这个,比较方便

2 使用ng-bind, 代替{{}} 这个不太方便,因为使用ng-bind后必须要一个DOM节点绑定, 例如span上, 没有直接{{}} 用不需要DOM节点方便

ng-bind 其实好一点,http://stackoverflow.com/questions/16125872/why-ng-bind-is-better-than-in-angular

http://weblog.west-wind.com/posts/2014/Jun/02/AngularJs-ngcloak-Problems-on-large-Pages

回到顶部