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 ...
随机推荐
- POJ 1163 The Triangle DP题解
寻找路径,动态规划法题解. 本题和Leetcode的triangle题目几乎相同一样的,本题要求的是找到最大路径和. 逆向思维.从底往上查找起就能够了. 由于从上往下能够扩展到非常多路径.而从下往上个 ...
- ORACLE-SQL（一）
迁移时间:2017年6月1日10:02:43 CreateTime--2017年6月1日09:59:30Author:Marydon 一.SQL语句 (一)基础篇 1.1.1 where 子句 1 ...
- ios开发之公交卡系统的设计与实现
// // main.m // Bus-公交 /* 公交一卡通充值系统.有两种功能选择.第一种投入硬币或者纸币 选择购票,另外一种一卡通充值,充值面额是20,50.100 */ #import < ...
- Linux 系统sudo命令
Linux系统中有许多的系统命令和服务为了安全性考虑,因此只有root超级用户才可以去使用.如果普通用户需要做此类操作,则可以使用su - 命令(减号(-)指完全切换到新的用户,即把环境变量信息也变更 ...
- lua 代码加密方案
require 实现 require函数在实现上是依次调用package.searchers(lua51中是package.loaders)中的载入函数,成功后返回.在loadlib.c文件里有四个载 ...
- PHP-Open Flash Chart报表生成
下载: http://www.cnblogs.com/huangcong/archive/2013/01/27/2878650.html 安装: 解压ZIP包, 将open-flash-chart.s ...
- Android开发学习之SQLite数据存取浅析
一.SQLite的介绍 1.SQLite简介 SQLite是一款轻型的数据库,是遵守ACID的关联式数据库管理系统,它的设计目标是嵌入 式的,而且目前已经在很多嵌入式产品中使用了它,它占用资源非常的低 ...
- Concurrency Managed Workqueue(二)CMWQ概述
一.前言 一种新的机制出现的原因往往是为了解决实际的问题,虽然linux kernel中已经提供了workqueue的机制,那么为何还要引入cmwq呢?也就是说:旧的workqueue机制存在什么样的 ...
- USB协议及认知
1.USB的拓扑结构决定了主机控制器就是最高统帅,没有主机控制器的要求设备永远不能主动发数据.所以主机控制器在USB 的世界里扮演着重要的角色,它是幕后操纵者. 2.数据包的发送, 这个过程包含很多信 ...
- 记录一次条件比较多的SQL查询语句
本人目前遇到一个比较长的查询语句: (个人觉得越是复杂的查询越有可能意味着数据库设计的不太合理,非数据领域专业人士,仅个人感觉)