ng-bind指令解决页面显示{{TeacherName}}问题

来源：互联网发布：java中判断是星期几编辑：程序博客网时间：2024/06/06 19:00

引言

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

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

Demo

首先我们先来看一个Demo：

<span style="font-size:18px;"><!DOCTYPE html><html ng-app> <head>     <meta charset="utf-8">     <title>ng-bind directive</title> </head> <body ng-controller="HelloController"> <div>     <p>直接输出字符串字面值</p>     Hello {{"World"}}     <hr> </div><div>     <p>使用占位符输出变量</p>     Hello {{greeting}}     <hr> </div><div>     <p>使用ng-bind指令输出变量</p>     Hello <span ng-bind="greeting"></span>     <hr> </div><script src="angular-1.3.0.js"></script> <script>     function HelloController($scope) {         $scope.greeting = "World";     } </script> </body> </html></span>

效果

分析

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

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

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

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

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

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

总结

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

0 0