Scope(作用域) 是應用在 HTML (視圖) 和 JavaScript (控制器)之間的紐帶。

Scope 是一個對象，有可用的方法和屬性。

Scope 可應用在視圖和控制器上。

$rootScope

每個AngularJs應用默認有一個根作用域--$rootScope， 根作用域位于最頂層，作為其他作用域的父作用域，可作用于整個應用中。

$scope

scope(作用域)對應MVC模式的Model，是應用在HTML(視圖)和JavaScript(控制器)之間的紐帶，可應用在視圖和控制器上。

scope是表達式執行的上下文，同時作用域也是一個對象，有可用的方法和屬性。

一、變量的取值和賦值

<div ng-controller="parentCtrl"> <span>{{number}}</span> <div ng-controller="childCtrl">  <span>{{number}}</span>  <button ng-click="number = number +1">增加</button> </div></div>function parentCtrl($scope){ $scope.number = 1;}function childCtrl($scope){ }

效果：

界面上顯示了兩個1，但當我們點擊按鈕之后，childCtrl作用域內的數據改變了，parentCtrl作用域內的數據沒有改變

分析：

①childCtrl作用域繼承了parentCtrl作用域(類似于JavaScript的原型鏈繼承)，所以childCtrl作用域可以訪問到parentCtrl的內容。
②點擊按鈕后childCtrl作用域就會創建一個number基礎類型變量，當childCtrl已有某個基礎類型變量就不會訪問原型鏈。

解決：

①可以使用$parent來指定上級作用域改變

 <div ng-controller="parentCtrl">  <span>{{number}}</span>  <div ng-controller="childCtrl">   <span>{{number}}</span>   <button ng-click="$parent.number = number +1">增加</button>  </div> </div>

②使用引用類型變量，內外層作用域均是data對象的引用，修改對象的屬性，引用的還是同一個變量。

 <div ng-controller="parentCtrl">  <span>{{data.number}}</span>  <div ng-controller="childCtrl">   <span>{{data.number}}</span>   <button ng-click="data.number = data.number +1">增加</button>  </div> </div>  function parentCtrl($scope){  $scope.data.number = 123'; } function childCtrl($scope){   }

ng-if、ng-repeat、ng-switch、ng-include等指令也會產生新作用域

二、Directive中的作用域

.directive("myDirective", function () {return { restrict: "AE", scope: {  name: '@myName',  age: '=',  changeAge: '&changeMyAge' }, replace: true, template: "<div class='my-directive'>" +  "我的名字是：<span ng-bind='name'></span><br/>" +  "我的年齡是：<span ng-bind='age'></span><br/>" +  "在這里修改名字：<input type='text' ng-model='name'><br/>" +  "<button ng-click='changeAge()'>修改年齡</button>" +  " </div>"}