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

最新推荐文章于 2020-09-09 15:37:45 发布

神奇大叔

最新推荐文章于 2020-09-09 15:37:45 发布

阅读量351

点赞数

分类专栏： Angular.js 文章标签： angularjs

本文链接：https://blog.csdn.net/weixin_43294560/article/details/104443739

版权

Angular.js 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

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
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJs 消息机制($emit、$broadcast、$on)

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

扫一扫