在AngularJS中显示模型中的数据有两种方式:

一种是使用花括号插值的方式:

 <p>{{text}}</p>

另一种是使用基于属性的指令,叫做ng-bind:

 <p ng-bind="text"></p>

这两种方式的效果都是一样的,其主要区别在于,使用花括号语法时,在AngularJS使用数据替换模板中的花括号时,第一个加载的页面,通常是应用中的index.html,其未被渲染的模板可能会被用户看到。而使用第二种方法的视图不会遇到这种问题。原因是,浏览器需要首先加载index.html页面,渲染它,然后AngularJS才能把它解析成你期望看到的内容。所以,对于index.html页面中的数据绑定操作,建议采用ng-bind。那么在数据加载完成之前用户就不会看到任何内容。

angularJS——ng-bind指令与插值的区别的更多相关文章

  1. 走进AngularJs(五)自定义指令----(下)

    自定义指令学习有段时间了,学了些纸上谈兵的东西,还没有真正的写个指令出来呢...所以,随着学习的接近尾声,本篇除了介绍剩余的几个参数外,还将动手结合使用各参数,写个真正能用的指令出来玩玩. 我们在自定 ...

  2. 走进AngularJs(四)自定义指令----(中)

    上一篇简单介绍了自定义一个指令的几个简单参数,restrict.template.templateUrl.replace.transclude,这几个理解起来相对容易很多,因为它们只涉及到了表现,而没 ...

  3. AngularJs -- 内置指令

    AngularJS提供了一系列内置指令.其中一些指令重载了原生的HTML元素,比如<form>和<a>标签, 当在HTML中使用标签时,并不一定能明确看出是否在使用指令. 其他 ...

  4. AngularJS中的指令全面解析(转载)

    说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJ ...

  5. 使用Angularjs的ng-cloak指令避免页面乱码

    在使用Anguarjs进行web开发或者进行SPA(single page application)开发时,往往会遇到下面这样的问题. 刷新页面时,页面会出现一些乱码,这里的乱码具体是指`{{expr ...

  6. 带你走近AngularJS - 创建自定义指令

    带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...

  7. 你知道用AngularJs怎么定义指令吗?

    前言 最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方.   Angularjs指令定义的API AngularJs的指令定义大致如下 ang ...

  8. Angularjs 动态添加指令并绑定事件

    先说使用场景,动态生成DOM元素并绑定事件,非常常见的一种场景,用jq实现效果: http://jsbin.com/gajizuyuju/edit?html,js,output var count=0 ...

  9. [转]你知道用AngularJs怎么定义指令吗?--很详细

    前言 最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方.   Angularjs指令定义的API AngularJs的指令定义大致如下 ang ...

随机推荐

  1. 【emWin】例程九:绘制流位图

    实验指导书及代码包下载: 链接:http://pan.baidu.com/s/1kVDIWIF 密码:9jbo 实验现象:

  2. Open Data Structure Templates

    数据结构模板 Chen 2016/12/22 前言 本篇博客的模板,全部是我纯手打的,如果有发现错误,请在下方留言指正:).欢迎大家参考. 有一些地方还不是很完善,等过一阵子用C++实现和部分重构下. ...

  3. mvc ef LINQ to Entities 不识别方法“Int32 Parse(System.String)”,因此该方法无法转换为存储表达式。

    private sys_User GetUserInfo() { sys_User model = null; var userId = Convert.ToInt32(AccountHelper.G ...

  4. .net web 小基累

    获取当前网站的根目录:HttpContext.Current.Request.PhysicalApplicationPath+“Content”

  5. java中Collections.sort排序详解

    Comparator是个接口,可重写compare()及equals()这两个方法,用于比价功能:如果是null的话,就是使用元素的默认顺序,如a,b,c,d,e,f,g,就是a,b,c,d,e,f, ...

  6. (。・・)ノ~个人java学习随笔记录

    基本认识 1.编程思维 根据这几天的java学习,编写程序最重要的就是要有一个清晰的思路.语法上的错误可以跟随着不断的联系与学习来弥补,清晰的思维却只有自己来前期模仿,后面慢慢摸索形成一套属于自己的思 ...

  7. node.js环境

    1.首先获得node环境 node -v; 2.判断node包管理器的版本 npm-v;查看node包管理器的版本; 3.npm install -g express 安装node.js的web开发框 ...

  8. js 获取滚动条的高度 以及 设置滚动条的高度

    //设置窗口滚动条高度 function setScrollTop(top){ if(!isNaN(top))document.body.scrollTop = top; } //取窗口滚动条高度 f ...

  9. 用户引导页--- ScrollView的使用

    一.首先第一步,写好用户轮播页的viewController,比如叫做LVUserGuideVC,关键代码是配置和scrollView和pageControl. (1)scrollView的设置 se ...

  10. vue 实现分转元的 过滤器

    1.啥也不说了直接上代码吧  使用起来超方便 Vue.filter('amount', function (number) { // var number = +val.replace(/[^\d.] ...