angular1中的事件，以及$broadcast,$emit的区别

最新推荐文章于 2022-11-28 14:47:48 发布

shidaping

最新推荐文章于 2022-11-28 14:47:48 发布

阅读量2.5k

点赞数

分类专栏： angular1 文章标签： angular 事件 emit broadcast

本文链接：https://blog.csdn.net/shidaping/article/details/52314317

版权

angular1 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

angular1中，使用$scope.$on(事件名，处理函数)可以接收事件，使用$scope.$broadcast(事件名，数据)或者$scope.$emit(事件名，数据)可以触发事件。那$broadcast和$emit有什么区别呢。他们的区别在于，$broadcast会向下广播事件即只有本身和子controller可以收到这个事件，而$emit向上广播事件，即只有本身和父controller可以收到这个事件。看例子。

<!DOCTYPE html>
<html ng-app="app">
<head>
  <title></title>
  <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
  <div ng-controller="ctrl1">
    <div ng-controller="ctrl2">
      <div ng-controller="ctrl3">
      </div>
      <button ng-click="triggerEmit()">triggerEmit</button>
      <button ng-click="triggerBroadcast()">triggerBroadcast</button>
    </div>
  </div>
  <script>
    var app = angular.module('app',[]);
    app.controller('ctrl1',['$scope',function($scope){
      $scope.$on('broadcast',function(){
        console.log('ctrl1 get broadcast');
      })
      $scope.$on('emit',function(){
        console.log('ctrl1 get emit')
      })
    }])
    app.controller('ctrl2',['$scope',function($scope){
      $scope.$on('broadcast',function(){
        console.log('ctrl2 get broadcast');
      })
      $scope.$on('emit',function(){
        console.log('ctrl2 get emit')
      })
      $scope.triggerBroadcast=function(){
        $scope.$broadcast('broadcast');
      }
      $scope.triggerEmit=function(){
        $scope.$emit('emit');
      }
    }])
    app.controller('ctrl3',['$scope',function($scope){
      $scope.$on('broadcast',function(){
        console.log('ctrl3 get broadcast');
      })
      $scope.$on('emit',function(){
        console.log('ctrl3 get emit')
      })
    }])
  </script>
</body>
</html>

当点击triggerEmit时，会打印出

ctrl2 get emit
ctrl1 get emit

当点击triggerBroadcast时，会打印出

ctrl2 get broadcast
ctrl3 get broadcast