Open Hugo-seth opened 8 years ago
Angular的核心分为三大部分：Controller、Service、Directive。今天来整理下我的controller学习经验。可以说理解了controller基本上就能够解决大部分Angular开发的问题。因为绝大部分的数据都是在controller里操作的，而Angular的核心思想就是以数据为中心。
如果大家之前了解过angular，可能听过父controller和子controller，实际上Controller之间是没有继承关系的，但angular有一个非常重要的属性就是$scope（可以简单理解为作用域），$scope是通过原型链继承的。而每个controller实例又可以注入$scope，所以controller之间可以实现作用域继承。但controller和$scope不是等价的，directive里也有$scope,所以controller和directive之间也可以实现作用域继承。所有的$scope都继承自$rootScope。我们来看下面这段代码和结果：
我们可以很明显的看出它们之间的继承关系，parentController里没定义childName属性，所以为空值。下面我们先改变parentController里的parent的值，然后再改变childController里的值，分别对应下面的两张图：
相信理解原型链继承的朋友对这个结果一下就能想明白，原型对象属性的改变会影响所有实例，实例上定义与原型属性同名的属性会把原型上的覆盖。
这样我们就可以得到第一种在controller之间通信的方式，如下图所示，不过这种方式只能实现父controller向子controller传值。
提到controller之间的通信，这是controller的一个重点。$scope提供了三个方法进行通信：$broadcast、$emit和$on。$broadcast用来向后代controller播报事件，$emit用来向祖先controller播报事件，$on用来监听事件。上代码：
我们需要一个事件来触发$broadcast和$emit方法，这里我用的是click事件，这两个方法的第一个参数都是事件名（必写），后面的参数都是可选的，写上我们想传递的变量或值。$on方法第一个参数必须与想监听的事件名一致，第二个参数是一个函数（理论上是可选的，但是不写那就没任何意义了），用来监听到事件的后续处理。函数的参数选填，有参数的话：第一个参数默认为event对象，有兴趣了解event对象有那些属性和方法的可以自行log出来，接下来的参数才是我们监听到的事件传递过来的值，一一对应。
接下来我们触发这两个方法，先在parentController的input输入值，点击按钮；再childController的input输入值，分别对应下面两图：
看图说话，我们的方法是有用的。
这样是不是就能解决我们的所有问题了？很显然不是，要是我想在没有嵌套关系的controller之间通信呢？
相信朋友们已经想到了，$rootScope肯定是有这三个方法的。所以不管我们想用什么姿势通信，$rootScope都可以帮我们解锁。
大家想要深入掌握，一定要把$rootScope对象log出来看一下。
Angular的核心中的核心就是$scope。
Angular的核心分为三大部分：Controller、Service、Directive。今天来整理下我的controller学习经验。可以说理解了controller基本上就能够解决大部分Angular开发的问题。因为绝大部分的数据都是在controller里操作的，而Angular的核心思想就是以数据为中心。
如果大家之前了解过angular，可能听过父controller和子controller，实际上Controller之间是没有继承关系的，但angular有一个非常重要的属性就是$scope（可以简单理解为作用域），$scope是通过原型链继承的。而每个controller实例又可以注入$scope，所以controller之间可以实现作用域继承。但controller和$scope不是等价的，directive里也有$scope,所以controller和directive之间也可以实现作用域继承。所有的$scope都继承自$rootScope。我们来看下面这段代码和结果：
我们可以很明显的看出它们之间的继承关系，parentController里没定义childName属性，所以为空值。下面我们先改变parentController里的parent的值，然后再改变childController里的值，分别对应下面的两张图：
相信理解原型链继承的朋友对这个结果一下就能想明白，原型对象属性的改变会影响所有实例，实例上定义与原型属性同名的属性会把原型上的覆盖。
这样我们就可以得到第一种在controller之间通信的方式，如下图所示，不过这种方式只能实现父controller向子controller传值。
提到controller之间的通信，这是controller的一个重点。$scope提供了三个方法进行通信：$broadcast、$emit和$on。$broadcast用来向后代controller播报事件，$emit用来向祖先controller播报事件，$on用来监听事件。上代码：
我们需要一个事件来触发$broadcast和$emit方法，这里我用的是click事件，这两个方法的第一个参数都是事件名（必写），后面的参数都是可选的，写上我们想传递的变量或值。$on方法第一个参数必须与想监听的事件名一致，第二个参数是一个函数（理论上是可选的，但是不写那就没任何意义了），用来监听到事件的后续处理。函数的参数选填，有参数的话：第一个参数默认为event对象，有兴趣了解event对象有那些属性和方法的可以自行log出来，接下来的参数才是我们监听到的事件传递过来的值，一一对应。
接下来我们触发这两个方法，先在parentController的input输入值，点击按钮；再childController的input输入值，分别对应下面两图：
看图说话，我们的方法是有用的。
这样是不是就能解决我们的所有问题了？很显然不是，要是我想在没有嵌套关系的controller之间通信呢？
相信朋友们已经想到了，$rootScope肯定是有这三个方法的。所以不管我们想用什么姿势通信，$rootScope都可以帮我们解锁。
大家想要深入掌握，一定要把$rootScope对象log出来看一下。
Angular的核心中的核心就是$scope。