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 ...
随机推荐
- java经典小程序
1,编写程序,判断给定的某个年份是否是闰年. 闰年的判断规则如下: (1)若某个年份能被4整除但不能被100整除,则是闰年. (2)若某个年份能被400整除,则也是闰年. import java.ut ...
- 解决Unable to load component class org.sonar.scanner.report.ActiveRulesPublisher/Unable to load component interface org.sonar.api.batch.rule.ActiveRules: NullPointerException
解决办法 Delete the directory data/es in your SonarQube installation. Restart SonarQube.
- netsh学习
show allowedprogram –显示被允许的程序配置 show config - 显示防火墙的配置 show currentprofile -显示 Windows 防火墙的当前配置文件. s ...
- 【BIEE】导出数据报错
使用BIEE导出数据的时候,发现个问题,导出过程中,报错如下: 问题解决: 找到文件opmn.xml,路径为:/Middleware/instances/instance1/config/OPMN/o ...
- java中的finally详解(finally中没有return i，却有i=XX）
问题分析 首先来问大家一个问题:finally 语句块一定会执行吗? 很多人都认为 finally 语句块是肯定要执行的,其中也包括一些很有经验的 Java 程序员.可惜并不像大多人所认为的那样,对 ...
- scala中:: , +:, :+, :::, +++的区别
4种操作符的区别和联系 一. :: 该方法被称为cons,意为构造,向队列的头部追加数据,创造新的列表. 用法为 x::list,其中x为加入到 头部的元素,无论x是列表与否,它都只将成为新生成列 ...
- Web Service基础——基础概念
1. Web Service基本概念 Web Service(Web服务)是一种远程调用技术,他的作用就是从远程系统中获取业务数据.具体来说,Web Service可以让你的网站使用其他网站的资源,比 ...
- hduoj---Tempter of the Bone
Tempter of the Bone Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Othe ...
- Loading...加载图收集
收集来源:http://cs.fangjia.com/zoushi/
- 【js】正则表达式（II）
JavaScript中提供了一个名为RegExp的对象来完成有关正则表达式的操作和功能,每一条正则表达式模式对应一个RegExp对象实例. 在JavaScript中,有两种方式可以创建RegExp对象 ...