关闭

学习angularjs的总结与心得-作用域

125人阅读 评论(0) 收藏 举报
分类:
以前在学习angularjs的时候学习到$scope和$rootScope的时候,看了一下用法就感觉这个作用域不就和原生的局部、全局作用域是差不多的,然后就没有细看,这段时间真正用到作用域方面的时候发现还是有区别的。
首先$scope是需要注入到控制器中的,作用域也就是当前控制器的范围内适用;如果没有寻找到则会沿着作用域链向上搜索,直到根作用域$rootScope。scope是html和单个controller之间的桥梁,数据绑定就靠他了。rootscope是各个controller中scope的桥梁。用rootscope定义的值,可以在各个controller中使用。
而且,$rootScope是由angularJS加载模块的时候自动创建的,每个模块只会有1个rootScope。rootScope创建好会以服务的形式加入到 $injector中。也就是说通过 $injector.get("$ rootScope ");能够获取到某个模块的根作用域。更准确的来说,$rootScope是由angularJS的核心模块ng创建的。
例子一:
    var module=angular.module('app',[]);
    var has_rootScope1 = angular.injector(['app','ng']);
    console.log(has_rootScope1.has("$rootScope")); //true

    var has_rootScope2 = angular.injector(['app']);
    console.log(has_rootScope1.has("$rootScope")); //false

    var has_rootScope3 = angular.injector(['ng']);
    console.log(has_rootScope1.has("$rootScope")); //true
    上例说明:
        $tootScope由核心模块ng创建,并以服务的形式存在于injector中。如果创建injector的时候,指定了ng模块,那么该injector中就包含$toorScope服务;否则不包含。
例子二:
    //控制器里的$injector,是有angular框架自动创建的
    var module=angular.module('app',[]);
    module.controller('ctrl',function($scope,$injector,$rootScope){
        $rootScope.name = 'lswl';
    });
    //在创建一个$injector,依赖于app和ng模块
    var myInjector = angular.injector(['app','ng']);
    var rootScope = myInjector.get('$rootScope');
    console.log($rootScope.name); //undefined
    上例说明:angular.injector()可以调用多次,每次都返回新的injector对象。所以我们自己创建的injector对象和angular框架自动创建的$injector不是同一个对象,那么得到的$rootScope也就不是同一个;由此可见,$rootScope的作用域不是我们想象中的全局作用域。
例子三:
     angular.module('app',[])
     .controller('ctrl',function($scope,$injector,$rootScope){
        console.log($scope.$parent == $rootScope); //true
    });
    上例说明:
        ng-controller指令给所在的DOM元素创建了一个新的$scope对象,并作为$rootScope的子作用域;$scope是由$rootScope创建的,$scope不会保护在$injector中。
例子四:
    //分别记住变量,用来判断跨控制器是否相等
    var my_rootScope = null;
    var my_scope = null;
    var my_injector = null;
    var module = angular.module('app',[]);
    module.controller('ctrl1',function($scope,$rootScope,$injector){
        $rootScope.name = 'lswl';
        my_rootScope = $rootScope;
        my_scope = $scope;
        my_injector = $injector;
    });
    module.controller('ctrl2',function($scope,$rootScope,$injector){
        console.log(my_rootScope == $rootScope); //true
        console.log(my_injector == $injector); //true
        console.log(my_scope == $scope); //false
    });
    上例说明:
        ng-app定义了一个angular模块,每个模块只有一个$rootScope,只有一个$injector,但可以有多个$scope。
        弄清了这三者的关系,我们看下angular提供的两个API,一个是scope(),一个是injector();使用angular.element()返回的DOM对象,都会包含这两个方法,用来获取与之关联的scope()和injector();
        由于每个模块的injector是唯一的,所以angular.elment().injector()直接返回元素所在模块的injector;
        angular.element().scope()可以获取到当前的scope或父scope;如果当前元素有scope,则返回自己的scope;如果没有则向父级方向寻找。如果找不到则返回rootScope;即返回作用域链上,距离该元素最近的scope。
1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1147次
    • 积分:64
    • 等级:
    • 排名:千里之外
    • 原创:5篇
    • 转载:0篇
    • 译文:0篇
    • 评论:1条
    文章分类
    文章存档
    最新评论