财神捕鱼官方下载KY78

書名： AngularJS入門與進階
作者名：江榮波
本章字數： 9字
更新時間： 2020-11-28 23:44:32

第5章作用域與事件

5.1 AngularJS作用域詳解

從本書的第一個案例開始，我們就已經接觸到了AngularJS的作用域，并且前面的每一個案例都和作用域息息相關，本章就對AngularJS作用域進行更深入的介紹。

眾所周知，JavaScript對象是基于key-value鍵值對的，我們可以把JavaScript對象作為一個map數據結構使用，而AngularJS作用域本質上就是一個普通的JavaScript對象，形式如下：

        var obj = {
            name:'Jane',
            age:30,
            walk:function(){

            console.info（"walk"）;
            }
        }

AngularJS作用域對象和普通JavaScript對象一樣，都可以在作用域對象中增加屬性或者方法，不同的是我們不需要手動去構造作用域對象，當HTML頁面中出現ng-app和ng-controller指令時，AngularJS框架會自動創建作用域對象，我們只需將其注入即可。

AngularJS程序中作用域的主要功能是存放模型數據，在控制器中，我們可以修改作用域中的模型數據或在作用域中新增模型數據（例如：$scope.address = 'China'），然后在視圖中通過AngularJS表達式展示模型數據（例如：{{address}}）。

每個AngularJS應用至少會有一個名稱為$rootScope的作用域，它是AngularJS應用的根作用域。前面我們接觸過ng-app指令，它可以出現在任何HTML標簽中，用于啟動AngularJS框架。當AngularJS啟動時會自動創建一個根作用域對象$rootScope，接著當我們使用ng-controller指令實例化控制器對象時，AngularJS框架會為我們創建一個子作用域$scope，默認情況下，該子作用域會繼承$rootScope作用域的所有屬性。下面來看一個作用域對象繼承的例子：

代碼清單：ch05\ch05_01\ch05_01.html

        <!doctype html>
        <html ng-app="app">
        <head>
            <meta charset="UTF-8">
            <title>ch05_01</title>
            <script type="text/javascript" src="/angular-1.5.5/angular.js"></
            script>
            <script type="text/javascript" src="controllers.js"></script>
        </head>
        <body ng-init="name='jane'; age=23">
            <div ng-controller="FirstController">
            </div>
        </body>
        </html>

上面使用的FirstController控制器代碼定義在controller.js文件中，代碼如下：

代碼清單：ch05\ch05_01\controllers.js

        var app = angular.module（'app', []）;
        app.controller（'FirstController', function（$scope, $log）{
            $log.info（"FirstController:name →" + $scope.name）;
            $log.info（"FirstController:age →" + $scope.age）;
        }）;

在本案例中，我們通過ng-init指令在$rootScope作用域對象中新增了兩個屬性，即name和age，接著使用ng-controller指令實例化FirstController控制器，此時AngularJS會創建一個子作用域對象繼承自$rootScope，在FirstController控制器中輸出子作用域對象的name和age屬性。在瀏覽器中運行ch05_01.html頁面，打開開發人員工具，控制臺輸出內容如下：

        FirstController:name →jane
        FirstController:age →23

控制臺中輸出了name和age的屬性值，說明控制器作用域對象確實繼承了$rootScope作用域的屬性。事實上$rootScope是所有作用域的父作用域（孤立作用域除外，后續會接觸到）。

需要注意的是，我們可以在ng-controller指令所在的HTML元素開始與結束標簽之間使用另外一個ng-controller指令實現作用域的嵌套，例如：

        <div ng-app> <! -- 創建$rootScope作用域 -->
        <div ng-controller="FirstController"> <! --創建作用域（記為scope1）繼承
        $rootScope-->
            <div ng-controller="SecondController"> <! --創建作用域（記為scope2）繼承
            scope1-->
            </div>
        </div>
        </div>

在這種情況下，scope1作用域繼承自$rootScope作用域，scope2作用域則會繼承scope1作用域，$rootScope和scope1作用域中的屬性在scope2作用域中均能訪問。

官术网_书友最值得收藏!

AngularJS入門與進階

第5章 作用域與事件

5.1 AngularJS作用域詳解

第5章作用域與事件