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

作者：不正经 | 2024-03-12 06:54:36

踩

angularjs 消息

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

代码示例:

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/222843