Learning angular events

Article reference

http://www.cnblogs.com/charmingyj/p/5689662.html

There are three ways to pass controller information:

1. Use $rootScope

Scopes in AngularJS have a very hierarchical and well-nested structure. Among them, they all have a main $rootScope (that is to say, the corresponding Angular application or ng-app), and then all other scope parts are inherited from this $rootScope, or are nested under the main scope of. Many times, you'll find that these scopes don't share variables or inherit anything from another prototype.

Second, the use of service services

So in this case, how to communicate between scopes? One option is to create a singleton service in the application scope, and then handle all child scope communication through this service.

3. Use time to spread

There is another option in AngularJS: handling communication via events in scope. But this approach has some limitations; for example, you can't propagate events broadly to all monitored scopes. You must choose whether to communicate with the parent scope or the child scope.

Basic object for event propagation

1. $emit is broadcast to the parent controller

2. $broadcast is to broadcast an event from the sender to his child scope.

3. $emit is broadcast to the parent controller, and the parent controller can receive the message

4. $on has two parameters function (event, msg), the first parameter is the event object, and the second parameter is the received message information .

<!doctype html>
<app-html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="Scope1.css" />
	</head>
	<body>
		<div ng-controller="parentController">
			parentController
			<ul>
				<li ng-repeat="i in [1]" ng-controller="currentController">
					<button ng-click="emitEvent()">
						事件向上传播 $emit('parentEvent')
					</button>
					<button ng-click="broadcastEvent()">
						事件向下传播 $broadcast('sonEvent')
					</button>
					<br>
					currentController
					<ul>
						<li ng-repeat="item in [1, 2]" ng-controller="sonController">
							sonController
						</li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
	<script src="js/angular-1.3.0.js"></script>
	<script src="Scope3.js"></script>
</html>

function parentController($scope) {
	// 注册事件的第一个参数是事件对象，第二个是事件传递的参数
	$scope.$on('parentEvent', function(event,paramObj) {
		console.log("parentEvent");
		console.dir(paramObj);
	});
}

function currentController($scope) {
	// 注册事件的第一个参数是事件对象，第二个是事件传递的参数
	$scope.$on('currentEvent', function(event,paramObj) {
		console.log("currentEvent");
		console.dir(paramObj);
	});

	// 触发在当前$scope的父亲$scope对象
	$scope.emitEvent = function(){
		var paramObj = {
			name : "huangbiao",
			age : 28
		};
		$scope.$emit("parentEvent", paramObj);
	};

	// 触发在当前$scope的子$scope对象
	$scope.broadcastEvent = function(){
		var paramObj = {
			name : "liumei",
			age : 23
		};
		$scope.$broadcast("sonEvent", paramObj);
	};

}

function sonController($scope) {
	// 注册事件的第一个参数是事件对象，第二个是事件传递的参数
	$scope.$on('sonEvent', function(event,paramObj) {
		console.log("sonEvent");
		console.dir(paramObj);
	});
}

Learning angular events

Guess you like