Angular 父子作用域之间交互（$on、$emit和$broadcast）

Angular 控制器中的 $scope 在各作用域之间遵循 JS 的对象原型继承方式
当子作用域中没有该对象时，默认向上（父作用域）寻找；子作用域有该对象时，使用子作用域对象。

注：这里的父作用域包含直接父级和祖先，子作用域包含直接子级和更下层级

例如，HTML如下：

    

        
        
Father: {{name}}!
        

              
             
Son: {{name}}
        
    

fatherCtrl 和 sonCtrl 里都使用了 name

sonCtrl 里没有定义 name

var app = angular.module ('myApp', []);
app.controller('fatherCtrl', function ($scope) {
    $scope.name = "father";
});
app.controller('sonCtrl', function ($scope) {
    
});

这时改变 sonCtrl 直接读取 fatherCtrl 中的 name

0001.gif

sonCtrl 里定义了 name

var app = angular.module ('myApp', []);
app.controller('fatherCtrl', function ($scope) {
    $scope.name = "father";
});
app.controller('sonCtrl', function ($scope) {
     $scope.name = "son";
});

这时 sonCtrl 和 fatherCtrl 中的 name 互相不影响

0002.gif

---

如果想让不同作用域之间的数据互相传递，就需要用到事件系统里的 $on、$emit和$broadcast。
简单来说 ：

• $on
  用于监听事件
• $emit
  用于向上分发（子作用域向父作用域）
• $broadcast
  用于向下广播（父作用域向子作用域）

向上分发

var app = angular.module ('myApp', []);
app.controller('fatherCtrl', function ($scope) {
    $scope.name = "father";
    $scope.$on ('test', function(e, newName) {
        $scope.name = newName;
    });
});
app.controller('sonCtrl', function ($scope) {
    $scope.name = "son";
    $scope.nameOnChange = function () {
        $scope.$emit ('test', $scope.name);
    }
});

sonCtrl 中 nameOnChange 函数调用 $emit 事件，向上分发 $scope.name
fatherCtrl 中 $on 事件监听到结果，修改$scope.name 的值
在修改 sonCtrl 的 name 时，fatherCtrl 的 name 随之改变，但修改 fatherCtrl 的 name 时 sonCtrl 的 name 不变化

0003.gif

向下广播

var app = angular.module ('myApp', []);
app.controller('fatherCtrl', function ($scope) {
    $scope.name = "father";
    $scope.nameOnChange = function () {
        $scope.$broadcast ('test', $scope.name);
    }
});
app.controller('sonCtrl', function ($scope) {
    $scope.name = "son";
    $scope.$on ('test', function(e, newName) {
        $scope.name = newName;
    });
    $scope.nameOnChange = function () {
        // $scope.$emit ('test', $scope.name);
    }
});

与向上分发效果相反
fatherCtrl 中 nameOnChange 函数调用 $broadcast 事件，向下广播 $scope.name
sonCtrl 中 $on 事件监听到结果，修改$scope.name 的值
在修改 fatherCtrl 的 name 时，sonCtrl 的 name 随之改变，但修改 sonCtrl 的 name 时 fatherCtrl 的 name 不变化
注：这里在 sonCtrl 里也需要定义 nameOnChange ，否则会默认调用父级的

0004.gif