angular中的做用域及继承

时间 2019-11-09

原文原文链接

在一些使用angular框架的大型项目中，彷佛有不少个controller，而每一个controller都有本身的$scope.javascript

$rootscope
$rootScope顶级做用域，也叫根做用域，相似于window，window的属性在任何子做用域均可以访问。$rootScope则是全部controller进行数据沟通的中间域，即在$rootScope中的数据，在每一个controller中都能经过$rootScope.xxx获取到。html
$scope
(1)做用
$scope 就在视图和控制器之间创建了一个桥梁,基于做用域视图在修改数据时会马上更新 $scope,一样的 $scope 发生改变时也会马上从新渲染视图.每一个控制器controller对应一个$scope，经过为其属性赋值,能够传递数据给模板渲染.
(2)生命周期
建立：在建立控制器或指令时，AngularJS会用$injector建立一个新的做用域，并在这个新建的控制器或指令运行时将做用域传递进去。
连接：当Angular开始运行时，全部的$scope对象都会附加或者连接到视图中。全部建立$scope对象的函数也会将自身附加到视图中。这些做用域将会注册当Angular应用上下文中发生变化时须要运行的函数。这些函数被称为$watch函数，Angular经过这些函数获知什么时候启动事件循环。
更新：当事件循环运行时，它一般执行在顶层$scope对象上（被称做$rootScope），每一个子做用域都执行本身的脏值检测。每一个监控函数都会检查变化。若是检测到任意变化，$scope对象就会触发指定的回调函数。
销毁：当一个$scope在视图中再也不须要时，这个做用域将会清理和销毁本身。尽管永远不会须要清理做用域（由于Angular会为你处理），可是知道是谁建立了这个做用域仍是有用的，由于你可使用这个$scope上叫作$destory()的方法来清理这个做用域。java
原型继承
scope是AngularJS中的做用域(其实就是存储数据的地方)，很相似JavaScript的原型链。搜索的时候，优先找本身的scope，若是没有找到就沿着做用域链向上搜索，直至到达根做用域rootScope。app

<!DOCTYPE html>
                    <html>
                    <head>
                     <title></title>
                    </head>
                    <body ng-app="myApp">
                    <div ng-controller="parentController">
                        {{name}}
                        <div ng-controller="sonController">
                            {{name}}
                        </div>
                    </body>
                    <script type="text/javascript" src="./angular.min.js"></script>
                    <script>
                        var parentController=function($scope){
                            $scope.name="parent";
                        }
                        var sonController=function($scope){
                            console.log($scope.name);//parent
                        }
                        parentController.$injector=["$scope"];
                        sonController.$injector=["$scope"];
                        angular.module("myApp",[])
                        .controller("parentController",parentController)
                        .controller("sonController",sonController)
                    </script>
                    </html>

首先子控制器在本身的做用域内查找name属性，没找到，向父控制器找。
    补充一点，如何在子控制器中修改父控制器中$scope的值，可见以下：

$scope.$parent.name="son";在子控制器中$scope.$parent就表示父控制器中的$scope,而后修改其值便可。
4.$new
$scope.$new(isolated，parent);用于定义scope的child scope
1）参数：isolated，是不是隔离的。若是值是true，那么这个scope不会从父scope继承原型。做用域是独立的，在这里不能看见父scope的属性。若是值为false，则继承自父（能够访问父scope的全部成员），默认为false!框架

parent  用于指定建立的子scope的父scope，若是没有此参数，则父scope为调用当前$new方法的$scope
    var myController=function($scope){
        $scope.data="hello!"
        var scope1=$scope.$new(false,$scope);
        console.log(scope1.data); //hello!  scope1继承了$scope,因此能够访问到data
        var scope2=$scope.$new(true,$scope);  
        console.log(scope2.data);// undefined  第一个参数为true，表示是隔离的，没法继承，本身又没有，故为undefined
    }
    myController.$injector=["$scope"];
    angular.module("myApp",[])
    .controller("myController",myController)