angularjs - on、on、emit和$broadcast的使用与区别

r囧r小猫 2024-03-23 12:52 55阅读 0赞

## angularjs -  o n 、 on、 on、emit和$broadcast的使用与区别 ##

*  AngularJS中的作用域有一个非常有层次和嵌套分明的结构。其中它们都有一个主要的`$rootScope`(也就说对应的Angular应用或者`ng-app`)，然后其他所有的作用域部分都是继承自这个`$rootScope`的，或者说都是嵌套在主作用域下面的。很多时候，你会发现这些作用域不会共享变量或者说都不会从另一个原型继承什么。
 *  那么在这种情况下，如何在作用域之间通信呢？其中一个选择就是在应用程序作用域之中创建一个单例服务，然后通过这个服务处理所有子作用域的通信。
 *  在AngularJS中还有另外一个选择：通过作用域中的事件处理通信。但是这种方法有一些限制；例如，你并不能广泛的将事件传播到所有监控的作用域中。你必须选择是否与父级作用域或者子作用域通信。
 *   o n 、 on、 on、emit和$broadcast使得event、data在controller之间的传递变的简单。

### **区别 1：** ###

*  发送消息：  s c o p e . scope. scope.emit(name, data) 或者  s c o p e . scope. scope.broadcast(name, data);
 *  接收消息： $scope.on(name,function(event,data)\{ \});

### **区别 2：** ###

*  $emit 广播给父controller $broadcast 广播给子controller
 *  broadcast 是从发送者向他的子scope广播一个事件。
 *  $emit 广播给父controller，父controller 是可以收到消息
 *  $on 有两个参数function(event,msg) 第一个参数是事件对象，第二个参数是接收到消息信息

### 例子 ###

*      <div ng-controller="ParentCtrl">                
            <div ng-controller="SelfCtrl">              
                <a ng-click="click()">click me</a>
                <div ng-controller="ChildCtrl"></div>   
            </div>
            <div ng-controller="BroCtrl"></div>         
        </div>
 *      app.controller('SelfCtrl', function($scope) {
          $scope.click = function () {
            $scope.$broadcast('to-child', 'child');
            $scope.$emit('to-parent', 'parent');
          }
        });
        
        app.controller('ParentCtrl', function($scope) {
          $scope.$on('to-parent', function(event,data) {
            console.log('ParentCtrl', data);       //父级能得到值
          });
          $scope.$on('to-child', function(event,data) {
            console.log('ParentCtrl', data);       //子级得不到值
          });
        });
        
        app.controller('ChildCtrl', function($scope){
          $scope.$on('to-child', function(event,data) {
            console.log('ChildCtrl', data);         //子级能得到值
          });
          $scope.$on('to-parent', function(event,data) {
            console.log('ChildCtrl', data);         //父级得不到值
          });
        });
        
        app.controller('BroCtrl', function($scope){
          $scope.$on('to-parent', function(event,data) {
            console.log('BroCtrl', data);          //平级得不到值
          });
          $scope.$on('to-child', function(event,data) {
            console.log('BroCtrl', data);          //平级得不到值
          });
        });
 *  最终结果：
 *  ParentCtrl child
 *  ChildCtrl parent

### 在$on的方法中的event事件参数，其对象的属性和方法如下： ###

*  <table> 
     <thead> 
      <tr> 
       <th>事件属性</th> 
       <th>目的</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>event.targetScope</td> 
       <td>发出或者传播原始事件的作用域</td> 
      </tr> 
      <tr> 
       <td>event.currentScope</td> 
       <td>目前正在处理的事件的作用域</td> 
      </tr> 
      <tr> 
       <td>event.name</td> 
       <td>事件名称</td> 
      </tr> 
      <tr> 
       <td>event.stopPropagation()</td> 
       <td>一个防止事件进一步传播(冒泡/捕获)的函数(这只适用于使用<code>$emit</code>发出的事件)</td> 
      </tr> 
      <tr> 
       <td>event.preventDefault()</td> 
       <td>这个方法实际上不会做什么事，但是会设置<code>defaultPrevented</code>为true。直到事件监听器的实现者采取行动之前它才会检查<code>defaultPrevented</code>的值。</td> 
      </tr> 
      <tr> 
       <td>event.defaultPrevented</td> 
       <td>如果调用了<code>preventDefault</code>则为true</td> 
      </tr> 
     </tbody> 
    </table>