04、AngularJS的ng-bind、多个控制器和apply

浏览数：26 / 时间：2015年06月11日

　　这篇，讲一下angularjs的ng-bind指令，多个控制器，以及手动触发angularjs的脏检查，我直接把代码贴，顺着代码讲。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body ng-app="ngApp">

<div ng-controller="firstController">
    <input type="text" ng-model="name"/>
    <div ng-bind="name"></div>
    <div ng-controller="secondController">
        <input type="text" ng-model="name"/>
        {{name}}
        {{date}}
    </div>
</div>
</body>
<script type="text/javascript" src="../public/javascripts/lib/angular.js"></script>
<script type="text/javascript">
    alert(123);
    var ngApp=angular.module(‘ngApp‘, []);
    ngApp.controller("firstController",function($scope){
        $scope.name="xixi";
    });
    ngApp.controller("secondController",function($scope){
        setInterval(function(){
            $scope.$apply(function(){
                $scope.date=new Date();
            });
        },1000);
    });
</script>
</html>

　　1、ng-bind：在使用angularjs表达式{{name}}时，如果angularjs还没加载完毕，我们会看到页面直接把angularjs表达式当作字符串给渲染到html，这样显示不友好。这里推荐使用ng-bind，ng-bind在angularjs没有加载完毕的时候是不会解析执行的，一旦angularjs加载完毕的时候就会执行。运行上面的代码，在弹出alert的时候，起码没有使用ng-bind的地方就会直接显示angularjs的表达式，而是用了ng-bind的地方则是什么没有显示，关闭alert后，页面就显示了正常的数据。

　　2、多个控制器：上面代码中，我们定义了两个控制器，firstController跟secondController，其中secondController是位于第一个firstController里面的，secondController里面没有name属性。我们在运行代码的时候，发现，第一个跟第二个控制器所控制的范围都显示了name的值，这是为什么呢？这其实跟javascript的作用域链是一样的。secondController里面没有找到name，就会往上一级找，刚好在firstController里面找打了name，所以两个控制器掌控的范围都显示了name的值。上面代码运行后，我们在第一个表单输入数值，发现，所以使用了name的地方都跟着变。而当在第二个表单，也就是第二个控制器掌控的作用域内，输入数值改变第二个控制器的model后，再在第一个表单输入值后，发现第二个的值不在变化了，这又是为什么呢？因为secondController此时内部会声明了name，而整个secondController运行的代码就在自己的作用域里面，同时由于上级的作用域是访问不到下级作用域的，所以不会影响secondController的值。注意，在第二个表单输入值，输入第一个表单的值，为啥第二个表单也跟着变呢？那是因为第二个表单往上面作用域寻找name变量，而不是第一个控制器所影响的。

　　3、angularjs的apply：前面几篇的一些例子里面讲到，我们在控制器里面更改$scope的属性值，view也跟着变。但是，如果我们把上面代码的setInterval里面的$scope.$apply去掉，直接写上$scope.date=new Date()，这样页面的时间是不会改变的。这是因为控制器里面的$scope的属性值了，却没有进行属性的检查。大家应该知道，通常要知道一个变量是否更改，一般有两种情况，一是通过set调用赋值，二是通过脏检查，把原来的对象复制一份快照，在特定的时间，遍历现在的对象属性同快照的对象的属性一个一个的比较。这种策略要保留两份变量，且遍历对象比较每一个属性，这是有一定的性能问题的。在angularjs中，使用的就是脏检查这种策略。

　　4、angularjs的脏检查策略：

　　　　a) angularjs不会检查每一个对象，只有添加到html中的对象，才会添加为检查对象，即一个watcher。

　　　　b) angularjs也不会检查每一个属性，只有属性被绑定以后，这个属性才会添加为检查属性。

　　　　c) angularjs在初始化的时候，会为每一个对象的绑定属性添加为监听对象，即一个对象绑定了n个属性，则同时也就是添加了n个watcher。

　　5、angularjs什么时候会进行脏检查呢？在angularjs系统中所有的方法，比如在controller初始化的时候，所以ng-开头的指令执行后都会触发脏检查。

　　6、$apply手动触发脏检查。注意的时候，$apply只是进入了angularjs的执行上下文，真正触发脏检查的是$digest。在使用$apply的时候，如果不带参数，则会检查$scope里所有监听的属性，所以在使用的时候，建议带上参数。

　　7、上面我们提到，出发脏检查的是$digest()方法，这个方法会出发$scope以及所有的子$scope的脏检查，而脏检查又出发了watcher，这样整个angularjs的数据双向绑定的机制就活起来了。虽然说触发脏检查的是$digest方法，但是不建议直接使用，而是建议使用$apply。$apply不是直接把信息传递给$digest的，而不是通过$eval这层过滤，如果$apply带的表达式不合法的话，$eval就会把错误发送给$exceptionHandler，只有合法的才会触发$digest，这样更加安全。

　　本篇就写到这，后续会接着写angularjs其他方面的知识。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

04、AngularJS的ng-bind、多个控制器和apply