乐乐捕鱼红包版下载

書名： AngularJS入門與進(jìn)階
作者名：江榮波
本章字?jǐn)?shù)： 862字
更新時間： 2020-11-28 23:44:32

第5章作用域與事件

5.1 AngularJS作用域詳解

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

眾所周知，JavaScript對象是基于key-value鍵值對的，我們可以把JavaScript對象作為一個map數(shù)據(jù)結(jié)構(gòu)使用，而AngularJS作用域本質(zhì)上就是一個普通的JavaScript對象，形式如下：

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

            console.info（"walk"）;
            }
        }

AngularJS作用域?qū)ο蠛推胀↗avaScript對象一樣，都可以在作用域?qū)ο笾性黾訉傩曰蛘叻椒?，不同的是我們不需要手動去?gòu)造作用域?qū)ο?，?dāng)HTML頁面中出現(xiàn)ng-app和ng-controller指令時，AngularJS框架會自動創(chuàng)建作用域?qū)ο?，我們只需將其注入即可?/p>

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

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

代碼清單：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作用域?qū)ο笾行略隽藘蓚€屬性，即name和age，接著使用ng-controller指令實例化FirstController控制器，此時AngularJS會創(chuàng)建一個子作用域?qū)ο罄^承自$rootScope，在FirstController控制器中輸出子作用域?qū)ο蟮膎ame和age屬性。在瀏覽器中運行ch05_01.html頁面，打開開發(fā)人員工具，控制臺輸出內(nèi)容如下：

        FirstController:name →jane
        FirstController:age →23

控制臺中輸出了name和age的屬性值，說明控制器作用域?qū)ο蟠_實繼承了$rootScope作用域的屬性。事實上$rootScope是所有作用域的父作用域（孤立作用域除外，后續(xù)會接觸到）。

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

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

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

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

AngularJS入門與進(jìn)階

第5章 作用域與事件

5.1 AngularJS作用域詳解

第5章作用域與事件