AngularJs scope詳解
一.scope是什麽？
scope是表達式(expression)的執行上下文，scope可以監測($watch)表達式(expression)的變化和傳播事件($emit,$broadcast).
二.scope特性
1.scope提供$watch API,用於監測model的變化
2.scope提供$apply API,將angular環境外的dom操作應用到angular環境上
3.scope通過原型，從parent scope繼承屬性。child scope可以直接訪問parent scope上的屬性，parent scope沒法直接訪問child scope上的屬性
三.scope層次結構
每一個angular應用有且僅有一個root scope,但可以擁有多個child scope。
應用可以擁有多個child scope,一些directive會創建新的child scope(如ng-repeat)。當新的scope創建後，它們將作為一個child scope添加到parent scope上，這樣創建了一個與它們附屬的DOM相似的樹結構。
當angular對表達式求值時，它首先查看與當前元素關聯的scope的屬性。如果沒有找到對應的屬性，它將會一直向上搜索parent scope,直到到達root scope。在javascript中，這個行為被稱為‘原型繼承’，child scope 典型繼承自它們的parent scope。
四.scope事件傳播
scope可以類似於DOM事件的方式進行事件傳播。事件可以被broadcast到child scope中或者被emit到parent scope中(當前scope有監聽也會執行)
1.parent scope向child scope broadcast 廣播事件和child scope向parent scope emit 分發事件示例：
<!DOCTYPE html> <html> <head> <title>angular1.x</title> <script type="text/javascript"src="../lib/angular1.6.5.js"></script> </head> <body ng-app="app"> <div ng-controller="parent"> {{count}} <div ng-click="$broadcast(‘toChild‘)">向子元素broadcast事件</div> <ul ng-controller="child"> {{count1}} <li ng-click="$emit(‘toParent‘)" ng-repeat="item in [1,2,3,4,5,6,7]">{{item}}</li> </ul> </div> <script type="text/javascript"> var app = angular.module(‘app‘,[]); app.controller(‘parent‘,[‘$scope‘,function($scope){ $scope.count = 1; $scope.$on(‘toParent‘,function(){ //child scope $emit向上分發的監聽 $scope.count++; }); $scope.$on(‘toChild‘,function(){ //當前scope有監聽，也會執行 $scope.count++; }) }]); app.controller(‘child‘,[‘$scope‘,function($scope){ $scope.count1 = 1; $scope.$on(‘toChild‘,function(){ //parent scope $broadcast向下廣播的監聽 $scope.count1++; }) }]); </script> </body> </html>
該示例中，點擊li 父元素的count會+1;點擊‘向子元素broadcast事件’，父count和子的count1頁也會+1,至於父的count怎麽會加1是因為當前scope中有 toChild監聽。
四.scope的生命周期
AngularJs scope詳解