AngularJS展示数据的ng-bind指令和{{}} 区别
2015-12-07 11:18
686 查看
在AngularJS中显示模型中的数据有两种方式:一种是使用花括号插值的方式:
<
p
>`text`</
p
>
另一种是使用基于属性的指令,叫做ng-bind:
<
p
ng-bind
=
"text"
></
p
>这两种方式的效果都是一样的,其主要区别在于,使用花括号语法时,在AngularJS使用数据替换模板中的花括号时,第一个加载的页面,通常是应用中的index.html,其未被渲染的模板可能会被用户看到。而使用第二站方法的视图不会遇到这种问题。原因是,浏览器需要首先加载index.html页面,渲染它,然后AngularJS才能把它解析成你期望看到的内容。所以,对于index.html页面中的数据绑定操作,建议采用ng-bind。那么在数据加载完成之前用户就不会看到任何内容。
![](http://s3.51cto.com/wyfs02/M02/77/2B/wKioL1Zk-vmQnYJnAALFmBrzAfw281.png)
相关文章推荐
- AngularJS
- angular form validator
- 学习 AngularJS (二)
- AngularJS教程
- AngularJS初级开发笔记
- Angular 2 - 5 分钟快速入门
- AngularJS进阶(二十)HTML5实现获取地理位置信息并定位功能
- AngularJS进阶(二十)HTML5实现获取地理位置信息并定位功能
- AngularJS进阶(十九)在AngularJS应用中集成百度地图实现定位功能
- AngularJS进阶(十九)在AngularJS应用中集成百度地图实现定位功能
- AngularJs双向绑定详解
- AngularJS的指令用法
- AngularJs ToolTips实现
- AngularJS进阶(十八)在AngularJS应用中集成科大讯飞语音输入功能
- AngularJS进阶(十八)在AngularJS应用中集成科大讯飞语音输入功能
- AngulaJS实战总结, 带你进入AngularJS世界(待续)
- 分享使用AngularJS创建应用的5个框架
- 9-Angular的数据显示优化处理
- AngularJS过滤排序思路
- AngularJS表单验证,手动验证或自动验证