<div>{{text}}</div> 当我们使用angular在页面中有取值的时候,如果出现网络加载慢的问题,可能会在页面上出现{{text}}这种不好的体验,那么angular有什么样的方法来解决呢。
1.通过ng-bind 上述例子改写为:
<div ng-bind="text"></div> 这样就可以解决上述问题。
但是如果页面中有多个取值怎么办,如:<div>{{str1}},{{str2}}</div>
这个时候可以通过ng-bind-template.用法如下:
<div ng-bind-template="{{str1}},{{str2}}"></div>
当取值的字符串含有html标签需要解析成htm结构的时候,可以用ng-bind-html.不过这种用法很少,需要依赖ngSanitize。
还有一种情况就是不希望angular去解析,可以用ng-non-bindable来解决,如:
<div ng-non-bindable>{{str}}</div>
2.通过ng-cloak来解决
<div ng-cloak>{{str}}</div>
只需要在最普通的用法的标签上加上ng-cloak命令,这样angular会通过display属性来优化数据显示问题,当解析为完成之前是display:none