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

以前在学习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。