這是＂AngularJS?-?七步從菜鳥到專家＂系列的第二篇。

在第一篇我們展示了如何開始搭建一個(gè)Angular應(yīng)用。在這一篇里，我們要討論一個(gè)理解AngularJS運(yùn)作原理所必須的基本概念，以及你如何更好地運(yùn)用它。

在這個(gè)系列教程里，我們會(huì)開發(fā)一個(gè)NPR（美國全國公共廣播電臺(tái)）廣播的音頻播放器，它能顯示Morning?Edition節(jié)目里現(xiàn)在播出的最新故事，并在我們的瀏覽器里播放。完成版的Demo可以看這里。

第二部分?Scopes

$scope是一個(gè)把view（一個(gè)DOM元素）連結(jié)到controller上的對(duì)象。在我們的MVC結(jié)構(gòu)里，這個(gè)?$scope?將成為model，它提供一個(gè)綁定到DOM元素（以及其子元素）上的excecution?context。

盡管聽起來有點(diǎn)復(fù)雜，但?$scope?實(shí)際上就是一個(gè)JavaScript對(duì)象，controller和view都可以訪問它，所以我們可以利用它在兩者間傳遞信息。在這個(gè)?$scope?對(duì)象里，我們既存儲(chǔ)數(shù)據(jù)，又存儲(chǔ)將要運(yùn)行在view上的函數(shù)。

每一個(gè)Angular應(yīng)用都會(huì)有一個(gè)?$rootScope。這個(gè)?$rootScope?是最頂級(jí)的scope，它對(duì)應(yīng)著含有?ng-app?指令屬性的那個(gè)DOM元素。

如果頁面上沒有明確設(shè)定?$scope?，Angular?就會(huì)把數(shù)據(jù)和函數(shù)都綁定到這里，?第一部分中的例子就是靠這一點(diǎn)成功運(yùn)行的。

在這個(gè)例子里，我們將使用?$rootScope?。在main.js文件里，我們給這個(gè)scope加一個(gè)name屬性。把這個(gè)函數(shù)放進(jìn) app.run函數(shù)里執(zhí)行，我們就保證了它能在應(yīng)用的其他部分之前被執(zhí)行。你可以把a(bǔ)pp.run函數(shù)看作是Angular應(yīng)用的main方法。

app.run(function($rootScope)?{?

??$rootScope.name?=?"Ari?Lerner";?

});?

現(xiàn)在，我們可以在view的任何地方訪問這個(gè)name屬性，使用模版表達(dá)式{{}}，像這樣：

{{?name?}}?

在這個(gè)系列之后的章節(jié)里，我們會(huì)深入介紹模版表達(dá)式的語法。

請(qǐng)看：

Ari?Lerner

總之：

要真正看到scope的強(qiáng)大功能，讓我們給一個(gè)DOM元素加上controller，它將創(chuàng)建這個(gè)元素的$scope?，讓我們跟這個(gè)元素互動(dòng)。

ng-controller

要明確創(chuàng)建一個(gè)$scope?對(duì)象，我們就要給DOM元素安上一個(gè)controller對(duì)象，使用的是ng-controller?指令屬性：

<div?ng-controller="MyController">?

??{{?person.name?}}?

</div>?

g-controller指令給所在的DOM元素創(chuàng)建了一個(gè)新的$scope?對(duì)象，并將這個(gè)$scope?對(duì)象包含進(jìn)外層DOM元素 的$scope?對(duì)象里。在上面的例子里，這個(gè)外層DOM元素的$scope?對(duì)象，就是$rootScope?對(duì)象。這個(gè)scope鏈?zhǔn)沁@樣的：

現(xiàn)在，MyController?給我們建立了一個(gè)可以從DOM元素內(nèi)部直接訪問的$scope?對(duì)象。下面我們?cè)诘倪@個(gè)$scope?里創(chuàng)建一個(gè)person對(duì)象，在main.js中：

app.controller('MyController',?function($scope)?{?

??$scope.person?=?{?

????name:?"Ari?Lerner"?

??};?

});?

現(xiàn)在我們可以在有ng-controller=’MyController’屬性的DOM元素的任何子元素里訪問這個(gè)person?對(duì)象，因?yàn)樗?scope上。

請(qǐng)看：

Ari?Lerner

除了一個(gè)例外，所有scope都遵循原型繼承（prototypal?inheritance），這意味著它們都能訪問父scope們。對(duì)任何屬性 和方法，如果AngularJS在當(dāng)前scope上找不到，就會(huì)到父scope上去找，如果在父scope上也沒找到，就會(huì)繼續(xù)向上回溯，一直 到$rootScope?上。

唯一的例外：有些指令屬性可以選擇性地創(chuàng)建一個(gè)獨(dú)立的scope，讓這個(gè)scope不繼承它的父scope們。

舉個(gè)例子，假設(shè)我們有一個(gè)ParentController?，含有一個(gè)person?對(duì)象，又有一個(gè)ChildController?想要訪問這個(gè)對(duì)象：

app.controller('ParentController',?function($scope)?{?

??$scope.person?=?{greeted:?false};?

});?

??

app.controller('ChildController',?function($scope)?{?

??$scope.sayHello?=?function()?{?

????$scope.person.greeted?=?true;?

??}?

});?

當(dāng)我們?cè)趘iew里把ChildController?綁定到ParentController?之下，在子元素里我們就能訪問ParentController?創(chuàng)建的父scope的屬性，像訪問ChildController?自己的scope中的屬性一樣：

<div?ng-controller="ParentController">?

??<div?ng-controller="ChildController">?

????<input?type="text"?ng-model="person.name"?placeholder="Name"></input>?

????<a?ng-click="sayHello()">Say?hello</a>?

??</div>?

??{{?person?}}?

</div>?

?

請(qǐng)看：

結(jié)合進(jìn)myApp

現(xiàn)在，我們把?$scope?用在我們的NPR應(yīng)用上。在上一篇結(jié)尾我們定義了app?module，現(xiàn)在我們開始深入DOM結(jié)構(gòu)，創(chuàng)建基本功能。

像在上面的例子里展示過的那樣，我們先創(chuàng)建一個(gè)root?controller，命名為PlayerController。還有一個(gè)?RelatedController?，它將負(fù)責(zé)管理音頻DOM元素、和為我們?nèi)』豊PR節(jié)目的列表。

回到main.js，現(xiàn)在我們就來創(chuàng)建這兩個(gè)controller：

var?app?=?angular.module('myApp',?[]);?

??

app.controller('PlayerController',?['$scope',?function($scope)?{?

}]);?

??

app.controller('RelatedController',?['$scope',?function($scope)?{?

}]);?

音頻

這兩個(gè)controller現(xiàn)在還沒什么功能，那么，讓我們給應(yīng)用先加上點(diǎn)聲音吧。在這個(gè)教程里我們將使用HTML5的音頻DOM元素，所以首先你得有個(gè)支持HTML5的瀏覽器（我們推薦Google?Chrome）。

這個(gè)音頻DOM元素，我們既可以把它加在HTML里，又可以加在我們的controller里。不過鑒于我們主要使用controller跟這個(gè)音頻DOM元素互動(dòng)，把它創(chuàng)建在controller里更合適。

現(xiàn)在我們就在PlayerController里創(chuàng)建一個(gè)音頻DOM元素。我們要把它儲(chǔ)存在scope上，然后——像你已經(jīng)學(xué)過的那樣——通過$scope對(duì)象把view和controller連接起來。

app.controller('PlayerController',?['$scope',?function($scope)?{?

??$scope.audio?=?document.createElement('audio');?

}]);?

這個(gè)設(shè)定現(xiàn)在可能有點(diǎn)無聊，因?yàn)樗€不能干什么。我們會(huì)在本系列的下一篇介紹“取回（fetching）”數(shù)據(jù)，現(xiàn)在我們先使用一個(gè)指定的.mp4網(wǎng)址。

還是在這個(gè)PlayerController里，指定音頻文件的src屬性為一個(gè)你能訪問的.mp4網(wǎng)址。方便起見，我們?cè)谶@里使用一個(gè)儲(chǔ)存在我們自己服務(wù)器上的NPR音頻文件，不過其實(shí)你可以指向任何網(wǎng)址。現(xiàn)在設(shè)定你的音頻src地址如下：

app.controller('PlayerController',?['$scope',?function($scope)?{?

??$scope.playing?=?false;?

??$scope.audio?=?document.createElement('audio');?

??$scope.audio.src?=?'/media/npr.mp4';?

}]);?

試試看

Play?Playing?audio:?false （請(qǐng)到英文原文測(cè)試“播放”按鈕）

音頻不會(huì)自己播放，我們必須讓它播放。要做到這一點(diǎn)，我們可以簡(jiǎn)單地使用$scope.audio.play()，然后HTML5音頻DOM元素就會(huì)開始播放mp4媒體流。

我們可以給用戶提供一個(gè)互動(dòng)元素：創(chuàng)建一個(gè)按鈕，把它綁定到$scope里的一個(gè)動(dòng)作上。在下一篇里我們會(huì)更深入地介紹這一塊，不過先看看上面例子里view的HTML：

<div?ng-controller="PlayerController">?

??<button?ng-click="play()"?class="button"?ng-show="!playing">Play</button>?

??<button?ng-click="stop()"?class="button?alert"?ng-show="playing">Stop</button>?

??Playing?audio:?<b>{{?playing?}}</b>?

</div>?

注意我們并不需要引用在scope里創(chuàng)建的那個(gè)音頻DOM元素，因?yàn)樗钱?dāng)我們載入controller時(shí)在controller內(nèi)部用 document.createElement(“audio”)創(chuàng)建的。在之后的教程里我們會(huì)重構(gòu)這個(gè)部分，因?yàn)樵赾ontroller里操作DOM元 素一般都不是個(gè)好主意（感謝Brad?Green在評(píng)論中指出這一點(diǎn)。）然而為了簡(jiǎn)便，我們?cè)谶@里還是保持這個(gè)controller如此。

在view里我們已經(jīng)加入了一些變量，在?$scope?上我們要管理這些變量。這里使用了一些高級(jí)概念，這些在本系列之后的教程里才會(huì)詳細(xì)介紹，所以如果你不能一下子全看明白也不用擔(dān)心：

app.controller('PlayerController',?['$scope',?function($scope)?{?

??$scope.playing?=?false;?

??$scope.audio?=?document.createElement('audio');?

??$scope.audio.src?=?'/media/npr.mp4';?

??$scope.play?=?function()?{?

????$scope.audio.play();?

????$scope.playing?=?true;?

??};?

??$scope.stop?=?function()?{?

????$scope.audio.pause();?

????$scope.playing?=?false;?

??};?

??$scope.audio.addEventListener('ended',?function()?{?

????$scope.$apply(function()?{?

??????$scope.stop()?

????});?

??});?

}]);?

以上就是對(duì)Angular.js的$scope?功能的介紹。在下一章，我們會(huì)介紹Angular.js的雙向數(shù)據(jù)綁定。

本系列的官方代碼庫可從github上下載：

https://github.com/auser/ng-newsletter-beginner-series.

要將這個(gè)代碼庫保存到本地，請(qǐng)先確保安裝了git，clone此代碼庫，然后check?out其中的part2分支：

git?clone?https://github.com/auser/ng-newsletter-beginner-series.git?

git?checkout?-b?part2

新人創(chuàng)作打卡挑戰(zhàn)賽發(fā)博客就能抽獎(jiǎng)！定制產(chǎn)品紅包拿不停！

總結(jié)

以上是生活随笔為你收集整理的七步从Angular.JS菜鸟到专家（2）：Scopes的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。