zoukankan      html  css  js  c++  java
  • ng-bind和{{}}插值法

    引言

            今天调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才是我们成长的阶梯呀!!

  • 相关阅读:
    BZOJ 1718: [Usaco2006 Jan] Redundant Paths 分离的路径( tarjan )
    BZOJ 1040: [ZJOI2008]骑士( 树形dp )
    BZOJ 1691: [Usaco2007 Dec]挑剔的美食家( 平衡树 )
    HDU 5667 Sequence 矩阵快速幂
    FZU 2225 小茗的魔法阵 扫描线+树状数组
    UVA 11916 Emoogle Grid 离散对数 大步小步算法
    UVA 11754 Code Feat 中国剩余定理+暴力
    FZU 2092 收集水晶 dp+bfs
    FZU2090 旅行社的烦恼 巧妙floyd 最短路
    UVA 11426 GCD
  • 原文地址:https://www.cnblogs.com/sxz2008/p/6367917.html
Copyright © 2011-2022 走看看