AngularJS展示数据的ng-bind指令和{{}} 区别
在AngularJS中显示模型中的数据有两种方式:
一种是使用花括号插值的方式:
1 |
<p>{{text}}</p> |
另一种是使用基于属性的指令,叫做ng-bind:
1 |
<p ng-bind="text"></p> |
这两种方式的效果都是一样的,其主要区别在于,使用花括号语法时,在AngularJS使用数据替换模板中的花括号时,第一个加载的页面,通常是应用中的index.html,其未被渲染的模板可能会被用户看到。而使用第二站方法的视图不会遇到这种问题。
原因是,浏览器需要首先加载index.html页面,渲染它,然后AngularJS才能把它解析成你期望看到的内容。
所以,对于index.html页面中的数据绑定操作,建议采用ng-bind。那么在数据加载完成之前用户就不会看到任何内容。
AngularJS展示数据的ng-bind指令和{{}} 区别的更多相关文章
- AngularJS(二):ng-app指令、表达式
本文也同步发表在我的公众号“我的天空” ng-app指令 AngularJS指令是扩展的HTML属性,所有指令均带有前缀“ng-”,我们学习的第一个指令便是ng-app,其定义了AngularJS管理 ...
- AngularJS系统学习之Directive(指令)
本文转自https://www.w3ctech.com/topic/1612 原文作者: Nicolas Bevacqua 原文:AngularJS’ Internals In Depth, Part ...
- angularjs 一篇文章看懂自定义指令directive
壹 ❀ 引 在angularjs开发中,指令的使用是无处无在的,我们习惯使用指令来拓展HTML:那么如何理解指令呢,你可以把它理解成在DOM元素上运行的函数,它可以帮助我们拓展DOM元素的功能.比如 ...
- 关于angularJS绑定数据时自动转义html标签
关于angularJS绑定数据时自动转义html标签 angularJS在进行数据绑定时默认是会以文本的形式输出,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止了html标签 ...
- AngularJS快速入门指南04:指令
AngularJS通过指令将HTML属性进行了扩展. AngularJS指令 AngularJS指令是带有ng-前缀的扩展HTML属性. ng-app指令用来初始化AngularJS applicat ...
- AngularJS中数据双向绑定(two-way data-binding)
1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-m ...
- 使用UITableView展示数据
TableView主要用于展示数据,类似于Android中的ListView. 我们可以通过两个方式使用TableView.第一种是直接使用TableView类.第二种是通过UITableViewCo ...
- PHP+Mysql+jQuery实现地图区域数据统计-展示数据
我们要在地图上有限的区块内展示更多的信息,更好的办法是通过地图交互来实现.本文将给大家讲解通过鼠标滑动到地图指定省份区域,在弹出的提示框中显示对应省份的数据信息.适用于数据统计和地图区块展示等场景. ...
- C#-WinForm-ListView-表格式展示数据、如何将数据库中的数据展示到ListView中、如何对选中的项进行修改
在展示数据库中不知道数量的数据时怎么展示最好呢?--表格 ListView - 表格形式展示数据 ListView 常用属性 HeaderStyle - "详细信息"视图中列标头的 ...
随机推荐
- 《JavaScript高级程序设计》读书笔记 ---Function 类型
说起来ECMAScript 中什么最有意思,我想那莫过于函数了——而有意思的根源,则在于函数实际上是对象.每个函数都是Function 类型的实例,而且都与其他引用类型一样具有属性和方法.由于函数是对 ...
- 10676 涂鸦跳跃(sort)
10676 涂鸦跳跃 该题有题解 时间限制:1000MS 内存限制:65535K提交次数:240 通过次数:19 题型: 编程题 语言: G++;GCC Description 你玩过曾经风靡一 ...
- jQuery进行简单验证的正则表达式
下面都是一些比较常用简单的验证,像那些特殊的复杂的情况这里不进行考虑 1.验证电话号码或者手机号码 ? 1 2 3 4 5 6 7 8 9 10 /** * 验证电话号码(手机号码+电话号码) * ...
- 【转】别人家的孩子之《说说我的web前端之路,分享些前端的好书》
链接http://www.cnblogs.com/Darren_code/archive/2011/02/09/JavaScript.html 2011-10-31 22:56 by 聂微东 PS ...
- 3.通过js代码设置css样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Python之异步IO&RabbitMQ&Redis
协程: 1.单线程运行,无法实现多线程. 2.修改数据时不需要加锁(单线程运行),子程序切换是线程内部的切换,耗时少. 3.一个cpu可支持上万协程,适合高并发处理. 4.无法利用多核资源,因为协程只 ...
- openwrt 更改 debug 等级(hostapd)
https://wiki.openwrt.org/doc/devel/debugging 调试hostapd,其中hostapd的调试等级如下: # Levels (minimum value for ...
- PHP中使用CURL(三)
对 post 提交的数据进行 http_build_query处理,然后再send出去,能实现更好的兼容性,更小的请求数据包. <?php /** * PHP发送Post数据 * @param ...
- javascript动画效果之任意效果任意值
通过学习,我发现当同一个ul下的li标签如果想要不同的效果,那怎么办? 比如第一个li是width变化,第二个li为透明度(opacity)变化,而opacity的值和width的值类型不同,不能通用 ...
- photoshop的页面制作练习1