引言

今天调bug的时候遇到了一个问题,就是有的时候加载出来的数据没有数据的时候出现的是{{TeacherName}},一看这个不是我在页面上绑的值吗?怎么这样就显示出来了呢……

针对这个问题,想起来了AngularJS中的单向绑定,所以本文简单介绍一下{{}}插值法和ng-bind指令的绑定方法。

Demo

首先我们先来看一个Demo:

  1. <span style="font-size:18px;"><!DOCTYPE html>
  2. <html ng-app>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>ng-bind directive</title>
  6. </head>
  7. <body ng-controller="HelloController">
  8. <div>
  9. <p>直接输出字符串字面值</p>
  10. Hello {{"World"}}
  11. <hr>
  12. </div>
  13. <div>
  14. <p>使用占位符输出变量</p>
  15. Hello {{greeting}}
  16. <hr>
  17. </div>
  18. <div>
  19. <p>使用ng-bind指令输出变量</p>
  20. Hello <span ng-bind="greeting"></span>
  21. <hr>
  22. </div>
  23. <script src="angular-1.3.0.js"></script>
  24. <script>
  25. function HelloController($scope) {
  26. $scope.greeting = "World";
  27. }
  28. </script>
  29. </body>
  30. </html>
  31. </span>

效果

分析

从以上代码和执行效果上我们可以看出:

1、  我们可以直接在页面上写上要输出的值,这样程序可以直接读取显示在页面上。

2、  使用{{}}和使用ng-bind指令绑定数据都是对数据的单向绑定。

3、  使用ng-bind指令和{{}}都是因为在controller中设置了一个变量greeting,当angularjs编译到这的时候会去找到这个变量,然后输出相应的值。

{{}}和ng-bind指令的不同点

两种方法其实是一样的效果,只不过Angularjs通常第一个加载的页面是index.html,当使用{{}}语法的时候,其未被渲染的模板可能会被用户看到。就是出现我在开始说的问题。所以对于这样现象,我们建议使用ng-bind方法绑定数据,这样在数据加载完成之前用户就不会看到任何内容。

总结

许多知识都是我们在用的时候才能更好的去体会,之前虽然知道ng-bind指令和{{}}语法,但是没有深刻的体会过,直到遇到bug……看来bug才是我们成长的阶梯呀!!

ng-bind和{{}}插值法的更多相关文章

  1. AngularJS进阶学习

    参考:http://***/class/54f3ba65e564e50cfccbad4b 1. AJAX:Asynchronous JavaScript and XML(异步的 JavaScript ...

  2. 【转载】AngularJs 指令directive之controller,link,compile

    关于自定义指令的命名,你可以随便怎么起名字都行,官方是推荐用[命名空间-指令名称]这样的方式,像ng-controller.不过你可千万不要用 ng-前缀了,防止与系统自带的指令重名.另外一个需知道的 ...

  3. angular(常识)

    我觉得angularjs是前端框架,而jquery只是前端工具,这两个还是没有可比性的. 看知乎上关于jquery和angular的对比http://www.zhihu.com/question/27 ...

  4. AngularJS开发指南4:指令的详解

    指令是我们用来扩展浏览器能力的技术之一.在DOM编译期间,和HTML元素关联着的指令会被检测到,并且被执行.这使得指令可以为DOM指定行为,或者改变它. AngularJS有一套完整的.可扩展的.用来 ...

  5. angularjs 指令(directive)详解(1)

    原文地址 什么是directive?我们先来看一下官方的解释: At a high level, directives are markers on a DOM element (such as an ...

  6. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  7. Directive Definition Object

    不知道为什么这个我并没有想翻译过来的欲望,或许我并没有都看熟透,不好误人子弟,原版奉上. Here's an example directive declared with a Directive D ...

  8. AngularJS的启动引导过程

    原文:http://www.angularjs.cn/A137?utm_source=ourjs.com 目录: 引导之前 自动引导启动框架 手工引导启动框架 引导第1步:创建注入器 引导第2步:创建 ...

  9. Angular指令(一)

    Angular开发者手册重点翻译之指令(一) 创建自定义的指令 这个文章将解释什么需要在自己的angularjs应用中创建自己的指令,以及如何实现它. 什么是指令 在高的层面上讲,指令是DOM元素中的 ...

  10. Scope Directive

    ---------------------------Scope-------------------------------- https://docs.angularjs.org/guide/sc ...

随机推荐

  1. sqlite 附加和分离数据库

    附加数据库 ATTACH DATABASE 'testDB.db' as 'TEST'; 分离数据库 DETACH DATABASE 'Test';

  2. 27、ArrayList和LinkedList的区别

    在Java的List类型集合中,ArrayList和LinkedList大概是最常用到的2个了,细看了一下它们的实现,发现区别还是很大的,这里简单的列一下个人比较关心的区别. 类声明 ArrayLis ...

  3. 使用String 的 intern做锁提高并发能力

    一个场景: 某段代码只对同一个ip过来的请求同步处理: 比如ip为a的请求进入了同步代码块,那么后续的ip为a的请求则在代码块外边等着,这时来了一个ip为b的请求,那么这个请求也可以进去,也就是a的所 ...

  4. LoadRunner 检查点函数总结

    今天我来总结一下Loadrunner中的检查点函数,主要介绍两个函数:web_find()和web_reg_find() 这两个函数均用于内容的查找,但两者也有本质的区别,具体介绍如下: 一.web_ ...

  5. vsftp客户连接常见故障现象

    ftp客户连接常见故障现象现象0:> ftp: connect :连接被拒绝原因: 服务没启动解决: # chkconfig vsftpd on<Enter> 现象1:500 OOP ...

  6. PHP-九个非常有用的功能[转]

    1. 函数的任意数目的参数你可能知道PHP允许你定义一个默认参数的函数.但你可能并不知道PHP还允许你定义一个完全任意的参数的函数下面是一个示例向你展示了默认参数的函数:// 两个默认参数的函数fun ...

  7. jsp中Undefined type: xxxx...

    在测试jsp的动作元素<jsp:useBean >时,写了一个计数器的栗子: JavaBean: package com.pers.count; /** * @author liangya ...

  8. HDUOJ-----2838Cow Sorting(组合树状数组)

    Cow Sorting Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  9. windows平台下压缩tar.gz

    windows平台下很多压缩软件(如360压缩)都支持tar.gz的解压,但不支持压缩 推荐一款支持tar.gz压缩的软件7zip 下面介绍可视化和命令行两种操作方式将文件压缩为tar.gz 可视化操 ...

  10. Android学习系列(9)--App列表之分组ListView

    吸引用户的眼球,是我们至死不渝的追求:      第一时间呈现最有价值的信息,简明大方,告诉客户,你的选择是多么的明智,这正是你寻觅已久的东西.       分组的应用场合还是很多的,有数据集合的地方 ...