首页 > Web开发 > 详细

在angularjs中提供了emit,broadcast和$on服务用于控制器之间基础事件的传递交流。

时间:2017-02-07 13:43:57      阅读:124      评论:0      收藏:0      [点我收藏+]

1、$emit 
该服务贯穿作用域发出一个向上的事件,并通知哪些注册在rootScope.Scopeemit被启动的地方,事件一直朝着根作用域传递,传递期间并通知哪些注册在作用域上的监听器,如果这期间一个监听器接受到了这个事件,会注销这个事件,那么事件将会停止向上继续传播。 
技术分享

<!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.Scopebroadcast被启动开始。下面的所有作用域都会接收到通知。之后,事件向下传播,在这期间,作用域中的监听器接收到通知,获取事件,但是不会注销事件,事件继续往下传播。

<!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>

 

运行结果如下: 
技术分享 
3、$on 
该服务监听指定类型的事件,获取从emitbroadcast发布的事件。 
提示:

1、如果在作用域中没有父子关系存在,可以在控制器中注入$rootScope、使用$broadcast服务向下传播事件,但是不能通过$emit向上传播事件。
2、在作用域中存在父子关系时,可以也仅可以由子控制器使用$emit服务向上传播事件,同时父作用域中的控制监听器可以注销事件。

在angularjs中提供了emit,broadcast和$on服务用于控制器之间基础事件的传递交流。

原文:http://www.cnblogs.com/lsr17/p/6373550.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!