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)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。