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 ...
随机推荐
- STS application.properties 中文乱码
解决方案: window -- preferences -- content 步骤一:Text -- Java Properties File 步骤二:Text -- Java Properties ...
- win7,8,10取得|取消管理员权限
取得: Windows Registry Editor Version 5.00[HKEY_CLASSES_ROOT\*\shell\runas]@=”管理员取得所有权”“NoWorkingDirec ...
- Stage3d 由浅到深理解AGAL的管线vertex shader和fragment shader || 简易教程 学习心得 AGAL 非常非常好的入门文章
Everyday Stage3D (一) Everyday Stage3D (二) Triangle Everyday Stage3D (三) AGAL的基本概念 Everyday Stage3D ( ...
- eclipse下使用cygwin的方法（Windows下用eclipse玩gcc/g++和gdb）
明天就回国了,今晚回国前写写如何配置eclipse和CDT.这个配置方法网上讨论不是很多,可能用的人少,毕竟Windows上写C++程序多数喜欢VS,即使写的是Linux程序,很多人仍然会用VS(说只 ...
- AsyncTask 异步任务基本使用-下载视频
概述 android 提供了一个异步任务类AsyncTask,使创建异步任务.更新UI变得更加简单,不再需要编写任务线程和Handler实例即可完成相同的任务.本例子将演示并实现,使用AsyncTas ...
- php新特性：trait 关键字使用
1.trait关键字:含义[特性] 1.1 和require include 区别: 后两者需要 实例化一个类或者静态调用,而trait相当于继承,但又不是extends关键字,它解决了单继承. 2. ...
- iOS高级教程:处理1000张图片的内存优化
一.项目需求 在实际项目中,用户在上传图片时,有时会一次性上传大量的图片.在上传图片前,我们要进行一系列操作,比如:旋转图片为正确方向,压缩图片等,这些操作需要将图片加载到内存中,下面对内存的使用做详 ...
- python学习笔记——多进程中的锁Lock
1 进程锁 python编程中,引入了对象互斥锁的概念,来保证共享数据操作的完整性. 每个对象都对应于一个可称为“互斥锁”的标记,这个标记用来保证在任一时刻,只能有一线程访问对象. 在python中我 ...
- CMA概述
前言 本文是近期学习CMA模块的一个学习笔记,方便日后遗忘的时候,回来查询以便迅速恢复上下文. 学习的基本方法是这样的:一开始,我自己先提出了若干的问题,然后带着这些问题查看网上的资料,代码,最后整理 ...
- 安装R语言的包的方法
安装R语言的包的方法: 1. 在线安装 在R的控制台,输入类似install.packages("TSA") # 安装 TSA install.packages("TS ...