引言

今天调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. JAVA 爬虫Gecco

    主要代码: Gecco(matchUrl="https://github.com/{user}/{project}", pipelines="consolePipelin ...

  2. js 垃圾回收机制与内存管理

    1.原理 js按照固定的时间间隔找到不在继续使用的变量,释放其占用的内存. 2.实现方式 (1)标记清除 垃圾收集器给存储在内存上的所有变量都加上标记: 之后,去掉环境中的变量以及被环境引用变量的标记 ...

  3. Android学习之Menu

    1.普通的Menu 在Activity中覆盖onCreateOptionsMenu(Menu menu)方法,该方法负责生产menu,它是一个回调函数,即当按下手机设备上的menubutton时And ...

  4. python函数中把列表(list)当参数时的"入坑"与"出坑"

    在Python函数中,传递的参数如果默认有一个为 列表(list),那么就要注意了,此处有坑!! 入坑 def f(x,li=[]): for i in range(x): li.append(i*i ...

  5. 学习JUnit

    一.为什么测试很重要? 塑造系统的设计.我们知道输入和输出应该是什么样的,但是我们需要创建什么对象来做到这一点呢?代码应该塑造成什么样的"形状"?编写测试可以让我们知道应该创建什么 ...

  6. python学习笔记——multiprocessing 多进程组件 进程池Pool

    1 进程池Pool基本概述 在使用Python进行系统管理时,特别是同时操作多个文件目录或者远程控制多台主机,并行操作可以节约大量时间,如果操作的对象数目不大时,还可以直接适用Process类动态生成 ...

  7. Python练习笔记——编写一个阶乘函数

    当输入一个数字时,函数自动计算该数的 阶乘 def factorial(num): j = 1 for i in range(1,num+1): j = j*i print(j) num = int( ...

  8. git配置gitignore

    一.背景                                                                                                 ...

  9. 转 docker 部署 kafka

    原文链接 http://blog.csdn.net/snowcity1231/article/details/54946857 -e KAFKA_BROKER_ID=1 -e ZK=zk -p 909 ...

  10. django 创建数据库表 命令

    一旦你觉得你的模型可能有问题,运行 python manage.py validate . 它可以帮助你捕获一些常见的模型定义错误. 模型确认没问题了,运行下面的命令来生成 CREATE TABLE ...