angularjs页面显示表达式问题
2015-11-06 16:58
696 查看
在AngularJS中显示模型中的数据有两种方式:
一种是使用花括号插值的方式:
<p>{{text}}</p>
另一种是使用基于属性的指令,叫做ng-bind:
<p ng-bind="text"></p>
这两种方式的效果都是一样的,其主要区别在于,使用花括号语法时,在AngularJS使用数据替换模板中的花括号时,第一个加载的页面,通常是应用中的index.html,其未被渲染的模板可能会被用户看到。而使用第二站方法的视图不会遇到这种问题。
原因是,浏览器需要首先加载index.html页面,渲染它,然后AngularJS才能把它解析成你期望看到的内容。
所以,对于index.html页面中的数据绑定操作,建议采用ng-bind。那么在数据加载完成之前用户就不会看到任何内容。
一种是使用花括号插值的方式:
<p>{{text}}</p>
另一种是使用基于属性的指令,叫做ng-bind:
<p ng-bind="text"></p>
这两种方式的效果都是一样的,其主要区别在于,使用花括号语法时,在AngularJS使用数据替换模板中的花括号时,第一个加载的页面,通常是应用中的index.html,其未被渲染的模板可能会被用户看到。而使用第二站方法的视图不会遇到这种问题。
原因是,浏览器需要首先加载index.html页面,渲染它,然后AngularJS才能把它解析成你期望看到的内容。
所以,对于index.html页面中的数据绑定操作,建议采用ng-bind。那么在数据加载完成之前用户就不会看到任何内容。
相关文章推荐
- 1.angular之Hello World
- angular-file-upload API angular文件上传插件
- 用angularjs写,点击盒子变色其他盒子恢复原色
- AngularJS中 ng-select 实例
- AngularJS 1.2.x 学习笔记(表单校验篇)
- AngularJS 学习笔记(表单校验篇) 示例
- AngularJS 参考手册
- [Angular 2] Validation
- [Angular 2] ng-control & ng-control-group
- [Angular 2] NgNonBindable
- angular 指令简述
- ionic工程组织文件
- AngularJS API之$injector ---- 依赖注入
- angularjs初窥门径
- AngularJs ngChange、ngChecked、ngClick、ngDblclick
- AngularJS 最常用的八种功能
- $resource 数据交互插件
- angularjs ngSanitize ngRoute ngAnimate 插件
- Angularjs 自定义服务 provide 里 provider 方法 以及 factory、 service 方法以及 provider 供应商的概念
- Angularjs filter 过滤器以及自定义 filter 过滤器详解