Une brève discussion sur 4 modes de communication du contrôleur angulaire

Cet article vous présentera les 4 modes de communication angulaire du contrôleur. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

[Recommandation associée : "tutoriel angulaire"]

Tout d'abord, résumez les 4 modes de communication du contrôleur angulaire :

• Héritage de portée.

• Diffusez les événements via $scope.

• Module émetteur d'événements.

• Service.

1. Héritage des scopes

Les sous-scopes peuvent accéder aux variables et aux fonctions déclarées dans leurs scopes ancêtres.

<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. Les événements de diffusion via $scope

L'appel $emit peut faire remonter la portée, $broadcast se propagera aux portées descendantes, $on peut être un auditeur enregistré.

<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. Module émetteur d'événements event-emitter

Le module émetteur d'événements fonctionne de la même manière que l'émetteur de portée. Ils présentent 3 différences clés :

• L'émetteur d'événements est indépendant de la portée, il est donc idéal de l'utiliser dans des services qui n'ont pas accès à la portée.

• Les fonctions qui seront utilisées sont nommées .on(), .emit().

• n'a pas de fonction $broadcast() correspondante.

<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. La communication la plus couramment utilisée est le service

Parce que le service est un singleton, modifiant la valeur du service dans n'importe quel composant. will Pour affecter d'autres composants, l'utilisation est très simple. Il suffit de lister le service comme dépendance, comme indiqué dans le code ci-dessus.

Pour plus de connaissances liées à la programmation, veuillez visiter :

Enseignement de la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!