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 ng-controller="Controller1">
	<div ng-controller="Controller2">
		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 ng-controller="Controller1">
	<div ng-controller="Controller2">
	
	</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 type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="event-emitter.js"></script>
<script type="text/javascript">
	var app = angular.module('app', []);
 
	app.factory('userService', function ($timeout, $window) {
		var emitter = $window.emitter();
		var user = {};
 
		//模拟http错误
		$timeout(function () {
			user.emit('error', 'Could not connect to server');
		}, 1000);
 
		return user;
	});
 
	app.factory('profileService', function (userService) {
		var ret = {
			user: userService,
		};
 
		userService.on('error', function () {
			console.log('get error');
		});
 
		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!