注意： 本文主要介紹了AngularJS中$scope的作用與生命周期,包括在DOM中添加controller對(duì)象的相關(guān)用法
$scope
$scope 的使用貫穿整個(gè) Angular App 應(yīng)用薇组，它與數(shù)據(jù)模型相關(guān)聯(lián)萎津，同時(shí)也是表達(dá)式執(zhí)行的上下文。有了 $scope 就在視圖和控制器之間建立了一個(gè)通道杏头，基于作用域視圖在修改數(shù)據(jù)時(shí)會(huì)立刻更新 $scope锌妻，同樣的 $scope 發(fā)生改變時(shí)也會(huì)立刻重新渲染視圖代乃。所以說(shuō)，有了 $scope 這樣一個(gè)橋梁,應(yīng)用的業(yè)務(wù)代碼可以都在 controller 中，而數(shù)據(jù)都存放在controller 的 $scope 中搁吓。
QQ圖片20170714214634.png
圖片說(shuō)明： $scope是一個(gè)把view（一個(gè)DOM元素）連結(jié)到controller上的對(duì)象原茅。在我們的MVC結(jié)構(gòu)里，這個(gè) $scope 將成為model堕仔，它提供一個(gè)綁定到DOM元素（以及其子元素）上的excecution context擂橘。
$scope說(shuō)明
$scope 就是一個(gè)JavaScript對(duì)象，controller和view都可以訪問(wèn)它摩骨，所以我們可以利用它在兩者間傳遞信息通贞。在這個(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元素峡迷。
如果頁(yè)面上沒(méi)有明確設(shè)定 $scope ，Angular 就會(huì)把數(shù)據(jù)和函數(shù)都綁定到這里你虹，在下面的代碼中绘搞，我們將使用 $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的任何地方訪問(wèn)這個(gè)name屬性卒暂，使用模版表達(dá)式{{}}:
{{ name }}
$scope 的作用
$scope 對(duì)象在 Angular 中充當(dāng)數(shù)據(jù)模型的作用,也就是一般 MVC 框架中 Model 得角色.但又不完全與通常意義上的數(shù)據(jù)模型一樣,因?yàn)?$scope 并不處理和操作數(shù)據(jù),它只是建立了視圖和 HTML 之間的橋梁,讓視圖和 Controller 之間可以友好的通訊.
$scope作用和功能：
提供了觀察者可以監(jiān)聽數(shù)據(jù)模型的變化
可以將數(shù)據(jù)模型的變化通知給整個(gè) App
可以進(jìn)行嵌套,隔離業(yè)務(wù)功能和數(shù)據(jù)
給表達(dá)式提供上下文執(zhí)行環(huán)境
在 Javascript 中創(chuàng)建一個(gè)新的執(zhí)行上下文,實(shí)際就是用函數(shù)創(chuàng)建了一個(gè)新的本地上下文,在 Angular 中當(dāng)為子 DOM 元素創(chuàng)建新的作用域時(shí),其實(shí)就是為子 DOM 元素創(chuàng)建了一個(gè)新的執(zhí)行上下文
$scope 生命周期
Angular 中也有一個(gè)'事件'的概念,比如當(dāng)一個(gè)綁定了 ng-model 的 input 值發(fā)生變化時(shí),或者一個(gè) ng-click 的 button 被點(diǎn)擊時(shí),Angular 的事件循環(huán)就會(huì)啟動(dòng).事件循環(huán)是 Angular 中非常非常核心的一個(gè)概念,因?yàn)椴皇潜疚闹髦妓圆欢嗾f(shuō),感興趣的可以自己看看資料.這里事件就在 Angular 執(zhí)行上下文中處理,$scope 就會(huì)對(duì)定義的表達(dá)式求值.此時(shí)事件循環(huán)被啟動(dòng), Angular 會(huì)監(jiān)控應(yīng)用程序內(nèi)所有對(duì)象,臟值檢查循環(huán)也會(huì)啟動(dòng)
$scope 的生命周期有4個(gè)階段:
第一階段：創(chuàng)建控制器或者指令創(chuàng)建時(shí), Angular 會(huì)使用 $injector 創(chuàng)建一個(gè)新的作用域,然后在控制器或指令運(yùn)行時(shí),將作用域傳遞進(jìn)去.第二階段： 鏈接Angular 啟動(dòng)后會(huì)將所有 $scope 對(duì)象附加或者說(shuō)鏈接到視圖上,所有創(chuàng)建 $scope 對(duì)象的函數(shù)也會(huì)被附加到視圖上.這些作用域?qū)?huì)注冊(cè)當(dāng) Angular 上下文發(fā)生變化時(shí)需要運(yùn)行的函數(shù).也就是 $watch 函數(shù), Angular 通過(guò)這些函數(shù)或者何時(shí)開始事件循環(huán).第三階段：更新一旦事件循環(huán)開始運(yùn)行,就會(huì)開始執(zhí)行自己的臟值檢測(cè).一旦檢測(cè)到變化,就會(huì)觸發(fā) $scope 上指定的回調(diào)函數(shù)第四階段：銷毀通常來(lái)講如果一個(gè) $scope 在視圖中不再需要, Angular 會(huì)自己清理它.當(dāng)然也可以通過(guò) $destroy() 函數(shù)手動(dòng)清理.
$rootScope
Angular 應(yīng)用啟動(dòng)并生成視圖時(shí),會(huì)將根 ng-app 元素與 $rootScope 進(jìn)行綁定.$rootScope 是所有 $scope 的最上層對(duì)象,可以理解為一個(gè) Angular 應(yīng)用中得全局作用域?qū)ο?所以為它附加太多邏輯或者變量并不是一個(gè)好主意,和污染 Javascript 全局作用域是一樣的.
ng-controller
要明確創(chuàng)建一個(gè)$scope 對(duì)象啄栓，我們就要給DOM元素安上一個(gè)controller對(duì)象，使用的是ng-controller 指令屬性：
<div ng-controller="MyController"> {{ person.name }}</div>
ng-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)沁@樣的：
![Uploading 6859134-78f595b653fe2272_880600.png . . .]
QQ圖片20170714220811.png
現(xiàn)在，MyController 給我們建立了一個(gè)可以從DOM元素內(nèi)部直接訪問(wèn)的$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元素的任何子元素里訪問(wèn)這個(gè)person 對(duì)象，因?yàn)樗?scope上昔字。除了一個(gè)例外爆袍，所有scope都遵循原型繼承（prototypal inheritance），這意味著它們都能訪問(wèn)父scope們。對(duì)任何屬性和方法螃宙，如果AngularJS在當(dāng)前scope上找不到蛮瞄，就會(huì)到父scope上去找，如果在父scope上也沒(méi)找到谆扎，就會(huì)繼續(xù)向上回溯挂捅，一直到$rootScope 上。
**唯一的例外：**有些指令屬性可以選擇性地創(chuàng)建一個(gè)獨(dú)立的scope堂湖，讓這個(gè)scope不繼承它的父scope們闲先。
舉例:假設(shè)我們有一個(gè)ParentController ，含有一個(gè)person 對(duì)象无蜂，又有一個(gè)ChildController 想要訪問(wèn)這個(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 之下伺糠，在子元素里我們就能訪問(wèn)ParentController 創(chuàng)建的父scope的屬性，像訪問(wèn)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>
