zoukankan      html  css  js  c++  java
  • 04、AngularJS的ng-bind、多个控制器和apply

      这篇,讲一下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其他方面的知识。

  • 相关阅读:
    PHP:_SERVER变量和_ENV变量列表
    一些使用jQuery開發的在線Web富文本編輯器
    xhtml+css排版,清理浮动整理汇总
    PHP 6 的新特性
    用PHP的CURL写的一个采集Discuz的例子
    SA、SD、SE 这三者的含义及区分
    PHP 之父 Rasmus Lerdorf 谈PHP开发
    http头的组成
    Jquery插件 可以随着滚动条的滚动而即时加载图片
    在你的网页中嵌入PDF等文件,实现pdf在线阅读
  • 原文地址:https://www.cnblogs.com/happylinjie/p/4472822.html
Copyright © 2011-2022 走看看