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

蔚落 2021-07-25 01:49 532阅读 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 条评论，532人围观）

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

相关阅读

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

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

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

相关 AngularJs路由机制

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

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

相关 Windows消息机制

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

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

相关 handle消息机制

一、几个关键概念 1、MessageQueue：是一种数据结构，见名知义，就是一个消息队列，存放消息的地方。每一个线程最多只可以拥有一个MessageQueue数

阳光穿透心脏的1/2处/ 2022年06月16日 07:20/ 0 赞/ 222 阅读

相关 Handler消息机制

前言 > 你只有努力奔跑，才能留在原地。 handler基本使用方法 > 入口Activity代码如下: public class HandlerDem

柔光的暖阳◎/ 2022年05月27日 13:47/ 0 赞/ 318 阅读

相关 Windows 消息机制

三种类型的消息 Default Window-Message Processing\[缺省的窗口消息处理\] \[url\]http://www.cnblo

太过爱你忘了你带给我的痛/ 2022年04月15日 00:07/ 0 赞/ 236 阅读

相关 android 消息机制

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

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

相关 AngularJS 脏检查机制

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

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

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

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

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

相关 AngularJs 事件机制

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

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