引言

今天调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. SqlServer数据库分离与附加

    SQL Server提供了“分离/附加”数据库.“备份/还原”数据库.复制数据库等多种数据库的备份和恢复方法.这里介绍一种学习中常用的“分离/附加”方法,类似于大家熟悉的“文件拷贝”方法,即把数据库文 ...

  2. Ubuntu vim+ ctags(包括系统函数) + taglist 配置

    阅读大型代码,我们常常须要打开非常多的代码文件,搜索各种定义.windows下用惯了ide的朋友.转战Linux的时候可能会认为非常难受,找不到合适的阅读工具. 事实上万能的vim就能够实现. 以下介 ...

  3. exception ORA-00918: 未明确定义列

      exception ORA-00918: 未明确定义列 CreateTime--2018年5月9日16:08:48 Author:Marydon 1.错误代码展示 SELECT G.* FROM ...

  4. 〖Linux〗打开qtcreater出现错误的解决方法

    1. 更换了显卡驱动,发现打开qtcreater时出现了以下的错误: qtcreator: error : cannot open shared object file: No such file o ...

  5. uva 699 The Falling Leaves（建二叉树同一时候求和）

    本来看着挺难的.大概是由于我多瞟了一眼题解,瞬间认为简单多了.做题就得这样,多自己想想.如今是 多校联赛,然而我并不会做. .. .慢慢来,一直在努力. 分析: 题上说了做多不会超过80行.所以能够开 ...

  6. 简单的 Helper 封装 -- CookieHelper

    using System; using System.Web; namespace ConsoleApplication5 { /// <summary> /// Cookie 助手 // ...

  7. 腾讯开放平台 iOS应用URL schema、Bundle ID填写 （含微博、微信）

    解释如下: qq比较麻烦点,需要两个 URL schemes 1.QQ+appID(注意:appID原本是10进制的,需要先转换16进制,网址:点击转换16进制) 2.tencent+appID 结束

  8. JNI入门

    JNI是Java Native Interface的缩写,Native指C/C++. JNI内容涉及两个方面: Java调用C,这种情况是最主要的 C调用Java,这种情况不常见 第一步:编写Java ...

  9. Appirater激励用户为你的app评分

    如果你此前开发过app,那么你会知道获得用户积极的评分并不是一件简单的事情.不幸的是,用户往往给他们不喜欢的东西负面评价,而不怎么倾向于给喜欢的内容留下积极评价.   所以,你作为一个开发者如何激励用 ...

  10. 60款与DevOps相关的开源工具

    原文地址:https://elasticbox.com/blog/de ... ools/ 你喜欢免费的东西吗?获得开发者社区支持的自动化,开源的工具是大家梦寐以求的.这里列举了 60+ 款最棒的开源 ...