AngularJs 消息机制($emit、$broadcast、$on)

蔚落 2021-07-25 01:49 506阅读 0赞

1、发送消息必须配合事件如(ng-click)在回调函数中使用
    2、$scope.$emit('名称',数据) 向自身以及父controller发送消息
    3、$scope.$broadcast('名称',数据)  向自身以及子controller发送消息
    4、$scope.$on('名称',function(event,data数据形参){...})  接收消息

代码示例:

<html ng-app="app" ng-controller="main">
    <head>
    	<meta charset="utf-8">
    	<title ></title>
    	
    	<script src="js/libs/angular.js"></script>
     <style>
    	.a{ 
    		color:red;
    	}
     </style>
    	
    </head>
    <body >
    
    
    <div ng-controller='d1'>
    <button ng-click='f()'>按钮</button>
    	<div ng-controller='d2'>
    		<p ng-click="f2()">哈哈</p>
    	</div>
    
    </div>
    
    
    
    
    
    <script>
    console.log(angular);
    	var app=new angular.module('app',[]);
    
    	app.controller('main',['$scope',function($scope){ 
    
    		$scope.msg='哈哈';
    	}])
    	app.factory('ssr',function(){ 
    			return { 
    				a:12,
    				b:15
    			}
    	})
    
    	app.controller('d1',['$scope','ssr',function($scope,ssr){ 
    
    
    			$scope.f=function()
    			{ 
    				
    				$scope.$broadcast('rec',{ a:12,b:15})
    			}
    
    			$scope.$on('send',function(event,data){ 
    				console.log(data);
    				alert('子 级发的')
    			})
    
    	}])
    
    	app.controller('d2',['$scope',function($scope){ 
    			$scope.$on('rec',function(event,data){ 
    
    					console.log(data);
    					alert('收到');
    			})
    
    			$scope.f2=function()
    			{ 
    				
    				$scope.$emit('send','给父级')
    			}
    
    	}])
    
    </script>
    
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，506人围观）

还没有评论，来说两句吧...

相关阅读

相关 Qt：消息机制

比如鼠标点击消息：QApplication先获取消息--->具体应该处理的窗口::event()---> event()根据消息类型来调用具体的虚函数 1）可以重载具体的虚函

落日映苍穹つ/ 2022年10月24日 11:46/ 0 赞/ 143 阅读

相关 rabbitmq消息队列 ack机制(消息确认机制)和消息补偿机制

参考:[https://blog.csdn.net/pan\_junbiao/article/details/112956537][https_blog.csdn.net_pa

待我称王封你为后i/ 2022年10月09日 03:19/ 0 赞/ 358 阅读

相关 AngularJs路由机制

概述最近项目要用到Angularjs路由机制，所以打算学一学，了解一下路由机制。在谈路由机制前有必要先提一下现在比较流行的单页面应用，就是所谓的single page

心已赠人/ 2022年08月20日 04:25/ 0 赞/ 224 阅读

相关 Windows消息机制

[Windows消息机制要点][Windows] 1. 窗口过程每个窗口会有一个称为窗口过程的回调函数(WndProc)，它带有四个参数，分别为：窗口句柄(Win

深碍√TFBOYSˉ_/ 2022年08月07日 04:43/ 0 赞/ 229 阅读

相关 runtime - 消息机制

做如下配置，使用 runtime 代码时会有适当的提醒： ![731437-20180313141831071-2037978314.png][] OC方法调用的本质

一时失言乱红尘/ 2022年03月22日 10:40/ 0 赞/ 218 阅读

相关 android 消息机制

Handler Message Looper MessageQueue ①Looper MessageQueue的创建主线程的消息队列是由系统创建的(pre

落日映苍穹つ/ 2022年01月07日 21:27/ 0 赞/ 342 阅读

相关 AngularJS 脏检查机制

　　脏检查是AngularJS的核心机制之一，它是实现双向绑定、MVVM模式的重要基础。一、digest循环　　AngularJS将双向绑定转换为一个堆watch表达式

本是古典何须时尚/ 2021年09月30日 01:32/ 0 赞/ 332 阅读

相关 windows 消息机制

[来源1][1] [来源2][2] [微软官方][Link 1] 1. Windows 的历史中国人喜欢以史为鉴，而事实也确实是，如果你能知道一件事情

一时失言乱红尘/ 2021年09月14日 14:50/ 0 赞/ 405 阅读

相关 AngularJs 消息机制($emit、$broadcast、$on)

1、发送消息必须配合事件如(ng-click)在回调函数中使用 2、$scope.$emit('名称',数据) 向自身以及父controller发送消息

蔚落/ 2021年07月25日 01:49/ 0 赞/ 507 阅读

相关 AngularJs 事件机制

AngularJs事件机制 1、ng-无on的事件名='函数名(参数必须是NG变量)',对元素添加事件机制,回调函数需要在控制器脚本中实现

Bertha 。/ 2021年07月24日 20:10/ 0 赞/ 404 阅读