在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. SVM与LR的比较

    两种方法都是常见的分类算法,从目标函数来看,区别在于逻辑回归采用的是logistical loss,svm采用的是hinge loss.这两个损失函数的目的都是增加对分类影响较大的数据点的权重,减少与 ...

  2. 计算机网络课程优秀备考PPT之第二章物理层(二)

    为了记录自己从2016.9~2017.1的<计算机网络>助教生涯,也为了及时梳理和整写笔记! 前期博客是, 计算机网络课程优秀备考PPT之第一章概述(一) 以上是<计算机网络> ...

  3. 【成长之路】【python】python基础2

    1.位运算 &(与) | (或) ~ (非) ^(异或) 2.三元运算 c = a+b if a>b else a-b if (a>b): a+b else: a-b 3.小知识( ...

  4. Commix命令注入漏洞利用

    介绍 项目地址:https://github.com/stasinopoulos/commix Commix是一个使用Python开发的漏洞测试工具,这个工具是为了方便的检测一个请求是否存在命令注入漏 ...

  5. bootstrap复习:组件

    一.下拉菜单 1.实例:将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,或者另一个声明了 position: relative; 的元素.然后加入组成菜单的 HTML 代码.为下拉菜单的父 ...

  6. bootstrap复习:全局样式

    一.概览 1.Bootstrap 是移动设备优先的. 2.在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功 ...

  7. qt 汉化 国际化

    两种方法. 1. 使用 QTextCodec  setcodeforname 设置编码, 然后在程序中对于需要处理的字符使用 fromLocal8Bit . 2. 使用 Linguist. 首先把文件 ...

  8. YII学习第二十三天,accessRules用法

    访问控制过滤器(Access Control Filter)访问控制过滤器是检查当前用户是否能执行访问的controller action的初步授权模式. 这种授权模式基于用户名,客户IP地址和访问类 ...

  9. HDU 2461 Rectangles#容斥原理

    http://acm.hdu.edu.cn/showproblem.php?pid=2461 题目很简单,但是由于询问数M可以很大,所以容易超时,这道题学到了在结构体里面写函数的方法,这样子效率更高, ...

  10. 1.MyBaits无代理全套增删改

    一.mybatis使用的准备工作 1.找到mybatis所需要的jar文件: mybatis-3.2.3.jar mybatis-spring-1.2.1.jar 2.解压mybatis-3.2.3. ...