ng-bind和{{}}插值法
引言
今天调bug的时候遇到了一个问题，就是有的时候加载出来的数据没有数据的时候出现的是{{TeacherName}}，一看这个不是我在页面上绑的值吗？怎么这样就显示出来了呢……
针对这个问题，想起来了AngularJS中的单向绑定，所以本文简单介绍一下{{}}插值法和ng-bind指令的绑定方法。
Demo
首先我们先来看一个Demo：
- <span style="font-size:18px;"><!DOCTYPE html>
- <html ng-app>
- <head>
- <meta charset="utf-8">
- <title>ng-bind directive</title>
- </head>
- <body ng-controller="HelloController">
- <div>
- <p>直接输出字符串字面值</p>
- Hello {{"World"}}
- <hr>
- </div>
- <div>
- <p>使用占位符输出变量</p>
- Hello {{greeting}}
- <hr>
- </div>
- <div>
- <p>使用ng-bind指令输出变量</p>
- Hello <span ng-bind="greeting"></span>
- <hr>
- </div>
- <script src="angular-1.3.0.js"></script>
- <script>
- function HelloController($scope) {
- $scope.greeting = "World";
- }
- </script>
- </body>
- </html>
- </span>
效果
分析
从以上代码和执行效果上我们可以看出：
1、 我们可以直接在页面上写上要输出的值，这样程序可以直接读取显示在页面上。
2、 使用{{}}和使用ng-bind指令绑定数据都是对数据的单向绑定。
3、 使用ng-bind指令和{{}}都是因为在controller中设置了一个变量greeting，当angularjs编译到这的时候会去找到这个变量，然后输出相应的值。
{{}}和ng-bind指令的不同点
两种方法其实是一样的效果，只不过Angularjs通常第一个加载的页面是index.html，当使用{{}}语法的时候，其未被渲染的模板可能会被用户看到。就是出现我在开始说的问题。所以对于这样现象，我们建议使用ng-bind方法绑定数据，这样在数据加载完成之前用户就不会看到任何内容。
总结
许多知识都是我们在用的时候才能更好的去体会，之前虽然知道ng-bind指令和{{}}语法，但是没有深刻的体会过，直到遇到bug……看来bug才是我们成长的阶梯呀！！
ng-bind和{{}}插值法的更多相关文章
- AngularJS进阶学习
参考:http://***/class/54f3ba65e564e50cfccbad4b 1. AJAX:Asynchronous JavaScript and XML(异步的 JavaScript ...
- 【转载】AngularJs 指令directive之controller，link，compile
关于自定义指令的命名,你可以随便怎么起名字都行,官方是推荐用[命名空间-指令名称]这样的方式,像ng-controller.不过你可千万不要用 ng-前缀了,防止与系统自带的指令重名.另外一个需知道的 ...
- angular(常识)
我觉得angularjs是前端框架,而jquery只是前端工具,这两个还是没有可比性的. 看知乎上关于jquery和angular的对比http://www.zhihu.com/question/27 ...
- AngularJS开发指南4：指令的详解
指令是我们用来扩展浏览器能力的技术之一.在DOM编译期间,和HTML元素关联着的指令会被检测到,并且被执行.这使得指令可以为DOM指定行为,或者改变它. AngularJS有一套完整的.可扩展的.用来 ...
- angularjs 指令（directive）详解(1)
原文地址 什么是directive?我们先来看一下官方的解释: At a high level, directives are markers on a DOM element (such as an ...
- AngularJs学习笔记--directive
原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...
- Directive Definition Object
不知道为什么这个我并没有想翻译过来的欲望,或许我并没有都看熟透,不好误人子弟,原版奉上. Here's an example directive declared with a Directive D ...
- AngularJS的启动引导过程
原文:http://www.angularjs.cn/A137?utm_source=ourjs.com 目录: 引导之前 自动引导启动框架 手工引导启动框架 引导第1步:创建注入器 引导第2步:创建 ...
- Angular指令（一）
Angular开发者手册重点翻译之指令(一) 创建自定义的指令 这个文章将解释什么需要在自己的angularjs应用中创建自己的指令,以及如何实现它. 什么是指令 在高的层面上讲,指令是DOM元素中的 ...
- Scope Directive
---------------------------Scope-------------------------------- https://docs.angularjs.org/guide/sc ...
随机推荐
- vbScript 备忘
closeCDRom.vbs Set Obj=CreateObject("WMPlayer.OCX.7") Set CD=Obj.CDROMCollection then CD.I ...
- isearch5 index，attribute和summary。
索引 isearch5 支持的索引分为:index,attribute和summary. Index指的是倒排索引,它存储了存储了从term到DocID的映射关系,形如: term-->(Doc ...
- 【Oracle】迁移含有BLOG类型的字段的表
日常数据库迁移过程中,发现dmp文件中的表,如果表含有blog类型的字段,无法进行迁移. 以下是我迁移含有blog类型字段表的经验分享' 使用PLSQL Developer进行导出 接着选择需要导出的 ...
- Java设计模式中的单例模式
有时候在实际项目的开发中,我们会碰到这样一种情况,该类只允许存在一个实例化的对象,不允许存在一个以上的实例化对象,我们将这种情况称为Java设计模式中的单例模式.设计单例模式主要采用了Java的pri ...
- write()和prinln()的区别？
输出数字不同: write()输出数字转换为字符,println原样输出. 输出null不同: write()输出引用类型的时候调用的toString转换为String数据,因此如果对象为null那么 ...
- nyoj---快速查找素数
快速查找素数 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 现在给你一个正整数N,要你快速的找出在2.....N这些数里面所有的素数. 输入 给出一个正整数数N ...
- 给定随机数列求第k大的数字
原来STL我还是有很多不知道的地方 STL 采用的算法是: 当数组长度 <= 3时, 采用插入排序. 当长度 > 3时, 采用快排 Partition 的思想,也就是说类似快速排序(这里不 ...
- SVN标准开发布局目录，trunk,branches,tags用法详解
http://www.cnblogs.com/newstar/archive/2011/01/04/svn.html 关于 SVN 目录结构 Subversion有一个很标准的目录结构,是 ...
- C语言中的指针和数组
下面的内容节选自由我所执笔的会议记录.对于本文的不足之处,各位可以提出自己的看法. Q1:指针和数组到底是怎么一回事? A:指针和数组有本质的不同.指针就是一个内存地址,在32位系统下,一个指针永远占 ...
- mpu6050 DMP库的移植
https://www.amobbs.com/thread-5528472-1-1.html 官方的运动库,必须通过这个才能启用MPU6050的DMP引擎(数据手册里完全不提这个东西,必须在官网注册登 ...