angularjs中的 $emit, $broadcast, $on

最新推荐文章于 2021-10-04 08:23:10 发布

weixin_34013044

最新推荐文章于 2021-10-04 08:23:10 发布

阅读量78

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/courtzjl/blog/1794377

版权

2019独角兽企业重金招聘Python工程师标准>>>

在angularjs中提供了emit,emit,broadcast和$on服务用于控制器之间基础事件的传递交流。
1、$emit
该服务贯穿作用域发出一个向上的事件，并通知哪些注册在rootScope.Scope上的监听器。该事件的生命周期开始于rootScope.Scope上的监听器。该事件的生命周期开始于emit被启动的地方，事件一直朝着根作用域传递，传递期间并通知哪些注册在作用域上的监听器，如果这期间一个监听器接受到了这个事件，会注销这个事件，那么事件将会停止向上继续传播。
这里写图片描述

<!DOCTYPE html>
<html>
<head>
 <title>Broadcasting</title>
 <script src="lib/angular.js"></script>
 <script>
 var app = angular.module('app', []);

 app.controller("firstCtrl", function ($scope) {
 $scope.$on('eventName', function (event, args) {
 $scope.message = args.message;
 console.log($scope.message);
 });
 });

 app.controller("secondCtrl", function ($scope) {
 $scope.handleClick = function (msg) {
 $scope.$emit('eventName', { message: msg });
 };
 });

 </script>
</head>
<body ng-app="app">
 <div ng-controller="firstCtrl" style="border:2px solid #E75D5C; padding:5px;">
 <h1>Parent Controller</h1>
 <p>Emit Message : </p>
 <br />
 <div ng-controller="secondCtrl" style="border:2px solid #428bca;padding:5px;">
 <h1>Child Controller</h1>
 <input ng-model="msg">
 <button ng-click="handleClick(msg);">Emit</button>
 </div>
 </div>
</body>
</html>

运行效果如下：

这里写图片描述

2、$broadcast
该服务发布一个向下的事件给作用域中的所有子节点以及以下的节点，并通知注册在
rootScope.Scope上的监听器，该事件的生命周期也是从rootScope.Scope上的监听器，该事件的生命周期也是从broadcast被启动开始。下面的所有作用域都会接收到通知。之后，事件向下传播，在这期间，作用域中的监听器接收到通知，获取事件，但是不会注销事件，事件继续往下传播。

<!DOCTYPE html>
<html>
<head>
 <title>Broadcasting</title>
 <script src="lib/angular.js"></script>
 <script>
 var app = angular.module('app', []);

 app.controller("firstCtrl", function ($scope) {
 $scope.handleClick = function (msg) {
 $scope.$broadcast('eventName', { message: msg });
 };

 });

 app.controller("secondCtrl", function ($scope) {
 $scope.$on('eventName', function (event, args) {
 $scope.message = args.message;
 console.log($scope.message);
 });
 });

 </script>
</head>
<body ng-app="app">
 <div ng-controller="firstCtrl" style="border:2px solid #E75D5C; padding:5px;">
 <h1>Parent Controller</h1>
 <input ng-model="msg">
 <button ng-click="handleClick(msg);">Broadcast</button>
 <br /><br />
 <div ng-controller="secondCtrl" style="border:2px solid #428bca;padding:5px;">
 <h1>Child Controller</h1>
 <p>Broadcast Message : </p>
 </div>
 </div>
</body>
</html>

运行结果如下：
这里写图片描述