AngularJS事件传递

在AngularJS中，作用域是具有层次分明的结构。其中根层级也就是我们经常看到的$rootScope，其次是$Scope，$Scope是继承$rootScope的。在$Scope中的变量是不会共享或者说不能从另外一个原型继承的。

如此情况下，如何在作用域中建立通信的？其中一个方法就是创建一个服务$http，在不同的作用域中依靠这个服务进行通信。

另外一个方法也是我们今天要讲到的，就是通过作用域中的事件处理通信。但是这种方法是有局限性的，只能在兄弟父子层级中通信，不能同时传播到所有的作用域。

1.$emit
该服务贯穿作用域发出一个向上的事件，并通知哪些注册在rootScope.Scope上的监听器。(即只能向父级传播事件)

2.$broadcast
该服务发布一个向下的事件给作用域中的所有子节点以及以下的节点，并通知注册在
rootScope.Scope上的监听器。(即只能向子级传播事件)

3.$on
该服务监听指定类型的事件，获取从emit或者broadcast发布的事件。 (即接收事件)

举一个例子：

<div ng-controller="FatherCtrl">    //父元素
  <p>{{name}}</p>
  <div ng-controller="ChildCtrl1">    //子元素1
    <p ng-click="change()">{{name}}</p>
  </div>
  <div ng-controller="ChildCtrl2">    //子元素2
    <p >{{name}}</p>
  </div>
</div>

<script>
    var app = angular.module("myApp",[]);   
    app.controller('FatherCtrl',function($scope) {
      $scope.name = "father";
      $scope.$on("child",function(e){
        $scope.name = "接收子级child1传来的事件";
        $scope.$broadcast("down");
    });
  });
    app.controller('ChildCtrl1',function($scope) {
    $scope.name = "child1";
      $scope.change = function() {
        $scope.name = "child1";
            $scope.$emit("child");
      };
    });
  app.controller('ChildCtrl2',function($scope) {
        $scope.name = "child2";
        $scope.$on("down",function(e){
            $scope.name = "接收父级father传来的事件";
        });
  });
</script>

上述代码的流程是，点击子元素child1，子元素child1通过$emit传播事件到父元素，父元素father通过$on接收到子元素传播的事件后，通过$broadcast传播事件给子元素，子元素child1并没有用$on来接收事件，所以子元素child1不会有任何的变化，而子元素child2通过$on接收父元素传播的事件“down”，然后修改自身的$scope.name。

AngularJS事件传递

推荐阅读更多精彩内容