<!DOCTYPE HTML> <html lang="zh-cn" ng-app> <head> <meta charset="UTF-8"> <title>scope-hierarchies</title> <style type="text/css"> .ng-cloak { display: none; } .ng-scope { border: 1px dashed red; } </style> </head> <body> <div ng-controller="MyController"> 经理：{{employee.name}} [{{department}}] <br/> 报告： <ul> <li ng-repeat="employee in employee.reports"> {{employee.name}} [{{department}}] </li> </ul> <hr/> {{greeting}} </div> <script src="https://www.jb51.net/angular-1.0.1.js" type="text/javascript"></script> <script type="text/javascript"> function MyController($scope) { $scope.department = "某部"; $scope.employee = { name:"My Little Dada", reports: [ {name:"Lcllao"}, {name:"那个谁^o^"} ] }; } </script> </body> </html>
注意，angular自动放置ng-scope class到与scope粘附的元素中。<style>定义在上面的例子中，通过红色的虚线，高亮新的scope的范围。因为repeater对{{employee.name}}表达式求值，child scope是必须的，但取决于表达式在哪一个scope进行求值，不同的scope有不同的结果。相似地，{{department}}的值是从root scope中原型继承得来的，只有在那个地方有，才有department属性的定义。
五、Retrieving Scopes from the DOM（从DOM中检索scope）
scope作为$scope数据属性附加到DOM中，可以被用于以调试作为目的的检索。（在应用中通过这个方式检索Scope是不可能的。）附加到的DOM的root scope的位置是通过ng-app directive的位置定义的。通常ng-app是放置在<html>元素中，但它也可以放置在其他元素中，例如，只有一部分视图需要被angular控制。
在debugger中查看scope：
1. 在浏览器中，对着感兴趣的元素点击右键，选择“查看元素”。我们可以看到浏览器debugger高亮了我们选中的元素。
2. debugger允许我们在console中通过$0变量去访问当前选择的元素。
3. 想查看关联的scope，我们可以在console中输入：angular.element($0).scope()
六、Scope Events Propagation（Scope事件传播）
scope可以以类似于DOM事件的方式进行事件传播。事件可以被broadcast（$rootScope.Scope#$broadcast）到child scope或者emit（$rootScope.Scope#$emit）到parent scope中。（当前scope如果有监听，也会执行）
<!DOCTYPE HTML>
<html lang="zh-cn" ng-app>
<head>
<meta charset="UTF-8">
<title>scope-event-propagation</title>
<style type="text/css">
.ng-cloak {
display: none;
}
</style>
</head>
<body>
<div ng-controller="MyController">
root scope count:{{count}}
<ul>
<li ng-repeat="i in [1]" ng-controller="MyController">
<button ng-click="$emit('MyEvent')">$emit("MyEvent")</button>
<button ng-click="$broadcast('MyEvent')">$broadcast("MyEvent")</button>
<br/>
middle scope count:{{count}}
<ul>
<li ng-repeat="item in [1,2]" ng-controller="MyController">
Leaf scope count:{{count}}
</li>
</ul>
</li>
</ul>
</div>
<script src="https://www.jb51.net/angular-1.0.1.js" type="text/javascript"></script>
<script type="text/javascript">
function MyController($scope) {
$scope.count = 0;
$scope.$on("MyEvent", function() {
$scope.count++;
});
}
</script>
</body>
</html>
七、Scope Life Cycle（scope生命周期）
浏览器正常的事件流中，当浏览器接收到事件后，它会执行一个相应的javascript回调。一旦回调函数执行完毕后，浏览器将会重绘DOM，并返回到继续等待事件的状态。
当浏览器在angular执行环境外调用javascript代码时，这意味着angular是不知道model的改变的。要正确处理model的修改，这个命令必须通过使$apply方法进入angular执行环境。只有在$apply方法中的model变更，才会正确地被angular统计。例如，一个directive监听了DOM事件，例如ng-click，它必须在$apply方法中对表达式进行求值。
在对表达式求值之后，$apply方法执行一个$digest。在$digest阶段里，scope检查所有$watch监听的表达式，将现在的值与旧的值作比较。脏检查（dirty checking）是异步的。这意味着赋值语句（例如$scope.username=”angular”）将不会马上导致一个$watch被通知，反而，$watch的通知将会延迟到$digest阶段。这个延迟是必须的，因为它把多个model更新联合到一个$watch通知中，这保证了在$watch通知的过程中，没有其他$watch在执行。如果一个$watch改变了model的值，那么它将会强制增加一个$digest周期。
1) Creation（创建scope）
root scope是在应用启动的过程中，被$injector（$injector）创建的。在模版linking的过程中，一些directive会创建新的child scope。
2) Watcher registration（注册watcher）
在模版linking过程中，directive在scope中注册$watch。这些watch将会被用作向DOM传播model的值。
3) Model mutation（Model变化）