在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指令和{{}} 区别的更多相关文章

  1. AngularJS(二):ng-app指令、表达式

    本文也同步发表在我的公众号“我的天空” ng-app指令 AngularJS指令是扩展的HTML属性,所有指令均带有前缀“ng-”,我们学习的第一个指令便是ng-app,其定义了AngularJS管理 ...

  2. AngularJS系统学习之Directive(指令)

    本文转自https://www.w3ctech.com/topic/1612 原文作者: Nicolas Bevacqua 原文:AngularJS’ Internals In Depth, Part ...

  3. angularjs 一篇文章看懂自定义指令directive

     壹 ❀ 引 在angularjs开发中,指令的使用是无处无在的,我们习惯使用指令来拓展HTML:那么如何理解指令呢,你可以把它理解成在DOM元素上运行的函数,它可以帮助我们拓展DOM元素的功能.比如 ...

  4. 关于angularJS绑定数据时自动转义html标签

    关于angularJS绑定数据时自动转义html标签 angularJS在进行数据绑定时默认是会以文本的形式输出,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止了html标签 ...

  5. AngularJS快速入门指南04:指令

    AngularJS通过指令将HTML属性进行了扩展. AngularJS指令 AngularJS指令是带有ng-前缀的扩展HTML属性. ng-app指令用来初始化AngularJS applicat ...

  6. AngularJS中数据双向绑定(two-way data-binding)

    1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-m ...

  7. 使用UITableView展示数据

    TableView主要用于展示数据,类似于Android中的ListView. 我们可以通过两个方式使用TableView.第一种是直接使用TableView类.第二种是通过UITableViewCo ...

  8. PHP+Mysql+jQuery实现地图区域数据统计-展示数据

    我们要在地图上有限的区块内展示更多的信息,更好的办法是通过地图交互来实现.本文将给大家讲解通过鼠标滑动到地图指定省份区域,在弹出的提示框中显示对应省份的数据信息.适用于数据统计和地图区块展示等场景. ...

  9. C#-WinForm-ListView-表格式展示数据、如何将数据库中的数据展示到ListView中、如何对选中的项进行修改

    在展示数据库中不知道数量的数据时怎么展示最好呢?--表格 ListView - 表格形式展示数据 ListView 常用属性 HeaderStyle - "详细信息"视图中列标头的 ...

随机推荐

  1. CentOS 7.0 64位 安装TFTP

    1.安装tftp软件# yum -y install tftp*2.修改配置文件 # vi /etc/xinetd.d/tftp server_args = -s /tftpboot '加-cdisa ...

  2. VMWARE player 如何让 win2012 guest os 支持HYPER-V

    在 vm player 下安装了 win2012 r2, 但是启用 hyper-v的时候,提示不支持, 这时候要修改 Open the file Location for this Virtual M ...

  3. kali自动化清理缓存和日志

    前几天发现kali无法正常开机,启动盘启动进去之后, 发现/var/log/目录下的日志文件太大把硬盘占满了,于是乎... 文件主要是这三个: kern.log :   包含内核产生的日志,有助于在定 ...

  4. [妙味JS基础]第十课:日期对象、时钟倒计时

    知识点总结 时间.年.月.日.时.分.秒 new Date() ->当前系统的时间对象 数字类型: getFullYear().getYear().getUTCFullYear() getYea ...

  5. 这两天dede 仿站的收货

    首先学会了织梦的安装,其次学会了找织梦默认的模板目录在生成更新主页html和系统设置下的默认末班风格下,然后学会了写一些简单的循环输出代码,发现head2.htm没有找到,更新文件和缓存发现能用了

  6. jsonp原来是这么回事,豁然开朗

    什么是JSONP 先说说JSONP是怎么产生的: 其实网上关于JSONP的讲解有很多,但却千篇一律,而且云里雾里,对于很多刚接触的人来讲理解起来有些困难,小可不才,试着用自己的方式来阐释一下这个问题, ...

  7. 去除VisualStudio中拼写错误检测的红色波浪线

    去除VisualStudio中拼写错误检测的红色波浪线 在Visual Assistant中将 Underline spelling errors in comments and strings us ...

  8. Unlocker(强力删除文件工具) 1.9.2 汉化绿色版

    软件名称: Unlocker(强力删除文件工具) 1.9.2 汉化绿色版软件语言: 简体中文授权方式: 免费软件运行环境: Win7 / Vista / Win2003 / WinXP 软件大小: 5 ...

  9. Win7/Win8右键菜单管理工具(Easy Context Menu) v1.5 绿色版

    软件名称: Win7/Win8右键菜单管理工具(Easy Context Menu)软件语言: 简体中文授权方式: 免费软件运行环境: Win8 / Win7 / Vista / WinXP软件大小: ...

  10. 10.按要求编写Java应用程序。 (1)创建一个叫做People的类: 属性:姓名、年龄、性别、身高 行为:说话、计算加法、改名 编写能为所有属性赋值的构造方法; (2)创建主类: 创建一个对象:名叫“张三”,性别“男”,年龄18岁,身高1.80; 让该对象调用成员方法: 说出“你好!” 计算23+45的值 将名字改为“李四”

    package com.hanqi.test; public class People { private String name,sex; private int age; private doub ...