码迷,mamicode.com
首页 > 其他好文 > 详细

ng-bind和{{}}插值法

时间:2017-02-05 17:05:20      阅读:248      评论:0      收藏:0      [点我收藏+]

标签:知识库   type   简单   rip   pop   index   bin   att   htm   

引言

        今天调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.   
  14. <div>  
  15.      <p>使用占位符输出变量</p>  
  16.      Hello {{greeting}}  
  17.      <hr>  
  18.  </div>  
  19.   
  20. <div>  
  21.      <p>使用ng-bind指令输出变量</p>  
  22.      Hello <span ng-bind="greeting"></span>  
  23.      <hr>  
  24.  </div>  
  25.   
  26. <script src="angular-1.3.0.js"></script>  
  27.  <script>  
  28.      function HelloController($scope) {  
  29.          $scope.greeting = "World";  
  30.      }  
  31.  </script>  
  32.  </body>  
  33.  </html>  
  34. </span>  

 

效果

技术分享

分析

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

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

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

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

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

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

总结

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

ng-bind和{{}}插值法

标签:知识库   type   简单   rip   pop   index   bin   att   htm   

原文地址:http://www.cnblogs.com/sxz2008/p/6367917.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!