AngularJS深入探讨scope，继承结构，事件系统和生命周期

本文实例讲述了AngularJS的scope，继承结构，事件系统和生命周期。分享给大家供大家参考，具体如下：

深入探讨 Scope 作用域

每一个 $scope 都是类 Scope 的一个实例。类 Scope 拥有可以控制 scope 生命周期的方法，提供事件传播的能力，并支持模板渲染。

作用域的层次结构

让我们再来看看这个简单的 HelloCtrl 的例子：

var HelloCtrl = function($scope){  $scope.name = 'World';}

HelloCtrl 看起来就跟普通的 JavaScript 构造函数没什么区别，事实上，除了 $scope 这个参数之外，确实没什么新奇之处。不过，这个参数究竟是从哪里来的呢？

这个新的作用域是由 ng-controller指令使用 Scope.$new() 方法生成的。等一下，这么说来我们必须至少拥有一个 scope 的实例才能创建新的 scope！没错，AngularJS其实有一个 $rootScope（这个是所有其他作用域的父级）。这个 $rootScope 实例是在一个新的应用启动的时候创建的。

ng-controller指令就是 可以创建作用域 指令的其中一个。AngularJS 会在任何它在DOM树中碰到这种 可以创建作用域 指令的时候创建一个新的 Scope类的实例。这些新创建的作用域通过 $parent 属性指向它自身的父作用域。DOM树中会有很多 可以创建作用域 的指令，结果就是，很多作用域被创建了。

作用域的形式类似于父子、树状的关系，并且最根部的就是 $rootScope 实例。就像作用域是被DOM树驱动着创建的一样，作用域树也是在模仿 DOM 的结构。

现在你已经知道了，一些指令会创建新的子级的作用域，你可能会想，为什么会需要这些复杂的东西。要想理解这一点，我们来演示一个例子，其中使用了 ng-repeat 循环指令。

控制器如下：

var WorldCtrl = function ($scope) {  $scope.population = 7000;  $scope.countries = [    {name: 'France', population: 63.1},    {name: 'United Kingdom', population: 61.8},  ];};

模版如下：

<ul ng-controller="WorldCtrl">  <li ng-repeat="country in countries">    {{country.name}} has population of {{country.population}}  </li>  <hr>  World's population: {{population}} millions</ul>

这个 ng-repeat 指令可以迭代一个 countries 的集合，并且为集合中的每一项都创建新的DOM 元素。ng-repeat 指令的语法非常容易理解；其中每一项都需要一个新的变量 country，并把它挂到 $scope 上面，以便视图渲染使用。

但这里有一个问题，就是，每一个 country 都需要将一个新的变量挂载到一个 $scope 上去，而我们也不能就简单的覆盖掉前面被挂在上去的值。AngularJS 通过为集合中的每一个元素都创建一个新的作用域来解决这个问题。新创建的这些作用域跟相匹配的DOM树结构非常相像，我们也能通过之前提到的那个牛逼的 Chrome 扩展 Batarang 来可视化的看到这一点。