AngularJS展示数据的ng-bind指令和{{}} 区别
2016-04-17 21:37
567 查看
在AngularJS中显示模型中的数据有两种方式:
一种是使用花括号插值的方式:
另一种是使用基于属性的指令,叫做ng-bind:
这两种方式的效果都是一样的,其主要区别在于,使用花括号语法时,在AngularJS使用数据替换模板中的花括号时,第一个加载的页面,通常是应用中的index.html,其未被渲染的模板可能会被用户看到。而使用第二站方法的视图不会遇到这种问题。
原因是,浏览器需要首先加载index.html页面,渲染它,然后AngularJS才能把它解析成你期望看到的内容。
所以,对于index.html页面中的数据绑定操作,建议采用ng-bind。那么在数据加载完成之前用户就不会看到任何内容。
一种是使用花括号插值的方式:
1 | < p >{{text}}</ p > |
1 | < p ng-bind = "text" ></ p > |
原因是,浏览器需要首先加载index.html页面,渲染它,然后AngularJS才能把它解析成你期望看到的内容。
所以,对于index.html页面中的数据绑定操作,建议采用ng-bind。那么在数据加载完成之前用户就不会看到任何内容。
相关文章推荐
- angularjs结合localstorage完成一个简单的备忘录
- AngularJS学习笔记—事件指令
- angular的学习
- Angularjs基础(二)
- AngularJS 学习笔记 -- 指令(Directive)
- AngularJS中使用的表单验证
- angularstrap typeahead 处理异步数据
- AngularJS 最常用的八种功能
- AngularJS ng-repeat下使用ng-model
- AngularJs中promise 和 $q 的一点解释
- AngularJS解决第一次加载闪烁问题
- AngularJS Scope 继承解析
- angularjs 与 springmvc 遇到的一些问题
- angular.element()的用法
- 有关Angular 2.0的一切
- 后Angular时代二三事
- angular自定义表单验证----用户名唯一
- AngularJS学习笔记(二) 表单验证案例(ng-repeat/filter)
- AngularJS语法详解(续)
- 为什么选择AngularJS前端框架