Angular打开页面显示表达式如何解决？

问答

Yyukjin发布于 12 年前最后回复 12 年前

10157210

比如下面代码：

<!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，我想确认下，如果不是，请问如何解决？

查看回复

TimothyJin#112 年前

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

yukjin#212 年前

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

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

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

microlv#312 年前

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

Simlesos#412 年前

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

DevinXian#512 年前

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

russj#612 年前

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

fjcgreat#712 年前

ng-cloak

soliury#812 年前

ng-bind

irisyo#912 年前

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

jinwyp#1012 年前

几种方法官方有说

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

参与回复

登录后即可参与回复。登录

Angular打开页面显示表达式如何解决？

回复 (10)

参与回复