angular中的作用域及继续

2024年2月6日 159次阅读 来源: 北城以南

在一些运用angular框架的大型项目中，好像有很多个controller，而每一个controller都有本身的$scope.

  1. $rootscope
    $rootScope顶级作用域，也叫根作用域，相似于window，window的属性在任何子作用域都能够接见。$rootScope则是一切controller举行数据沟通的中心域，即在$rootScope中的数据，在每一个controller中都能经由过程$rootScope.xxx获取到。

  2. $scope
    (1)作用
    $scope 就在视图和控制器之间建立了一个桥梁,基于作用域视图在修正数据时会马上更新 $scope,一样的 $scope 发作转变时也会马上从新衬着视图.每一个控制器controller对应一个$scope，经由过程为其属性赋值,能够通报数据给模板衬着.
    (2)生命周期
    建立：在建立控制器或指令时，AngularJS会用$injector建立一个新的作用域，并在这个新建的控制器或指令运转时将作用域通报进去。
    链接：当Angular最先运转时，一切的$scope对象都邑附加或许链接到视图中。一切建立$scope对象的函数也会将本身附加到视图中。这些作用域将会注册当Angular运用上下文中发作变化时须要运转的函数。这些函数被称为$watch函数，Angular经由过程这些函数获知什么时刻启动事宜轮回。
    更新：当事宜轮回运转时，它一般实行在顶层$scope对象上（被称作$rootScope），每一个子作用域都实行本身的脏值检测。每一个监控函数都邑搜检变化。假如检测到恣意变化，$scope对象就会触发指定的回调函数。
    烧毁：当一个$scope在视图中不再须要时，这个作用域将会清算和烧毁本身。只管永久不会须要清算作用域（由于Angular会为你处置惩罚），然则晓得是谁建立了这个作用域照样有效的，由于你能够运用这个$scope上叫做$destory()的要领来清算这个作用域。

  3. 原型继续
    scope是AngularJS中的作用域(实在就是存储数据的处所)，很相似JavaScript的原型链 。搜刮的时刻，优先找本身的scope，假如没有找到就沿着作用域链向上搜刮，直至抵达根作用域rootScope。

                    <!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)
    原文作者：北城以南
    原文地址: https://segmentfault.com/a/1190000009598760
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞