A brief discussion on 4 ways of angular controller communication

This article will introduce to you the 4 ways of angular controller communication. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

[Related recommendation: "angular tutorial"]

First summarize the 4 ways of angular controller communication:

• Scope inheritance.

• Broadcast events through $scope.

• Event emitter module.

• Serve.

1. Scope inheritance

Subscopes can access variables and functions declared in their ancestor scopes.

<div>
	<div>
		this prints '42':{{answer}}
	</div>
</div>
m.controller('Controller1', function ($scope) {
	$scope.answer = 42;
});
m.controller('Controller2', function ($scope) {
	console.log($scope.answer);
});

2. Broadcast events through $scope

$emit call can bubble up the scope, $broadcast will propagate to descendant scopes, $on can be registered listener.

<div>
	<div>
	
	</div>
</div>
m.controller('Controller1', function ($scope) {
	$scope.$on('ping', function (){
		console.log('pong');
	});
	$scope.$broadcast('broadcast');
});
m.controller('Controller2', function ($scope) {
	$scope.$emit('ping');
	$scope.$on('broadcast', function (){
		console.log('broadcast');
	});
});

3. Event emitter module event-emitter

The event-emitter module works similar to the scope emitter. They have 3 key differences:

• event-emitter is scope independent, so it is ideal to use it in services that do not have access to the scope.

• The functions to be used are named .on(), .emit().

• There is no corresponding $broadcast() function.

<script></script>
<script></script>
<script>
	var app = angular.module(&#39;app&#39;, []);
 
	app.factory(&#39;userService&#39;, function ($timeout, $window) {
		var emitter = $window.emitter();
		var user = {};
 
		//模拟http错误
		$timeout(function () {
			user.emit(&#39;error&#39;, &#39;Could not connect to server&#39;);
		}, 1000);
 
		return user;
	});
 
	app.factory(&#39;profileService&#39;, function (userService) {
		var ret = {
			user: userService,
		};
 
		userService.on(&#39;error&#39;, function () {
			console.log(&#39;get error&#39;);
		});
 
		return ret;
	});
</script>

4. The most commonly used communication is service

Because the service is a singleton, changing the value of the service in any component will To affect other components, the usage is very simple. Just list the service as a dependency, as shown in the above code.

For more programming-related knowledge, please visit: Programming Teaching! !

The above is the detailed content of A brief discussion on 4 ways of angular controller communication. For more information, please follow other related articles on the PHP Chinese website!