2.3 ng-bind指令_AngularJS入门与进阶-QQ阅读男生轻小说网

书名：AngularJS入门与进阶
作者名：江荣波
本章字数：385字
更新时间：2020-11-28 23:44:29

2.3 ng-bind指令

ng-bind指令是和数据绑定相关的另一个指令，其作用是实现作用域到视图的单向数据绑定，和表达式功能类似，可用于向界面中输出作用域中的数据，例如2.2节案例中输出uname属性的表达式：

        <div>{{uname}}</div>

可以替换为：

        <div ng-bind="uname"></div>

或者

        <div class="ng-bind:uname"></div>

不同的是，在使用AngularJS表达式{{name}}时，如果遇到网络问题，就会导致AngularJS加载缓慢，我们会看到浏览器直接把AngularJS表达式当作字符串渲染到页面中，这样用户体验将不是很好，所以推荐使用ng-bind指令。ng-bind指令在AngularJS没有加载完毕的时候是不会解析执行的，只有AngularJS加载完毕才会执行。

window.alert()方法会中断JavaScript代码的执行，可以通过alert()方法模拟网络加载延迟的情况，例如：

代码清单：ch02\ch02_04.html

        <!doctype html>
        <html ng-app>
        <head>
            <meta charset="UTF-8">
            <title>ch02_04</title>
            <script type="text/javascript" src="../angular-1.3.0.14/angular.js">
            </script>
        </head>
        <body >
            <div>用户名：<input type="text" ng-model="uname" /></div>
            <div ng-bind="uname"></div>
            <script type="text/javascript">
                alert（"pause"）;
            </script>
        </body>
        </html>

我们可以在浏览器中运行ch02_04.html页面（见图2.3），未经过AngularJS框架解析的表达式内容直接输出到了页面中。

图2.3 AngularJS表达式作为字符串渲染到页面示例

相比之下，使用ng-bind指令则不会出现这种现象，但是当我们需要进行运算处理或者使用过滤器对输出内容进行处理时，则必须使用表达式。