AngularJS展示数据的ng-bind指令和{{}}的区别

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

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

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

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

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

这两种方式的效果是一样的,主要的区别在于:

使用花括号语法的时候,在AngularJS使用数据模板中的花括号时,第一个加载的页面,通常是应用中的index.html,其未被渲染的模板可能会被用户看到

使用ng-bind的方法时就不会遇到这样的情况

遇到这种情况的原因是:

浏览器需要首先加载index.html页面,渲染他,然后AngularJS才能把它解析成你期望的内容。所以,对于Index.html页面的数据绑定操作,建议采用ng-bind。那么在数据加载完成之前用户就不会看到任何内容。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • AngularJS是什么?AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架。首先,它是...
    200813阅读 1,668评论 0 3
  • 基础ng属性指令 布尔属性 布尔属性代表一个true或false值。当这个属性出现时,这个属性的值就是true(无...
    oWSQo阅读 1,253评论 0 0
  • AngularJS 简介 AngularJS 是一个 JavaScript 框架。它可通过 标签添加到 HTM...
    鹿守心畔光阅读 1,500评论 0 25
  • 基础ng属性指令 ng-hrefng-srcng-disabledng-checkedng-readonlyng-...
    JUN_API阅读 524评论 0 0
  • 今天在大悦城对4号5号10号店进行培训,培训时间是从10点到下午1点钟结束。 因为没有反馈我是不清楚到底这次培训或...
    罗召伟阅读 181评论 0 2