Maison > interface Web > js tutoriel > Comment `$scope.$emit` et `$scope.$on` facilitent-ils la communication d'événements dans les contrôleurs AngularJS ?

Comment `$scope.$emit` et `$scope.$on` facilitent-ils la communication d'événements dans les contrôleurs AngularJS ?

Mary-Kate Olsen
Libérer: 2024-12-11 11:58:12
original
960 Les gens l'ont consulté

How Do `$scope.$emit` and `$scope.$on` Facilitate Event Communication in AngularJS Controllers?

Communication d'événements dans les contrôleurs utilisant $scope.$emit et $scope.$on

$scope.$emit et $scope.$ sont des méthodes AngularJS essentielles pour faciliter la communication d'événements entre les contrôleurs. Cependant, comprendre leur comportement précis est crucial pour une mise en œuvre efficace.

La méthode $emit

$emit distribue un événement à partir d'un contrôleur, l'envoyant vers le haut à travers la hiérarchie des portées. . Il permet aux contrôleurs de communiquer avec les étendues parents et potentiellement d'autres étendues enfants.

La méthode $on

$on écoute les événements émis par d'autres contrôleurs. Sa fonction de rappel reçoit un objet événement avec des détails sur l'événement émis, y compris les données transmises.

Correspondance des noms d'événements

Lorsque vous utilisez $emit et $on, il est important pour utiliser des noms d'événements correspondants. Le nom de l'événement détermine quels contrôleurs recevront l'événement.

Relations de portée

La relation entre les portées des contrôleurs détermine quelles méthodes de communication sont efficaces.

Relation Parent-Enfant

Dans une relation d'envergure parent-enfant, $broadcast dans le contrôleur parent (émission) et $on dans le contrôleur enfant (écoute) suffiront.

Exemple :

function firstCtrl($scope) {
    $scope.$broadcast('someEvent', [1,2,3]);
}

function secondCtrl($scope) {
    $scope.$on('someEvent', function(event, mass) { console.log(mass); });
}
Copier après la connexion

Aucun parent -Relation enfant

S'il n'y a pas de relation parent-enfant, injecter $rootScope dans le contrôleur et utiliser $rootScope.$broadcast garantira que l'événement atteint toutes les portées.

Exemple :

function firstCtrl($rootScope) {
    $rootScope.$broadcast('someEvent', [1,2,3]);
}
Copier après la connexion

Diffusion de l'événement de l'enfant au parent

Pour distribuer des événements des étendues enfants aux étendues parents, utilisez $scope.$emit dans le contrôleur enfant et $scope.$on dans le contrôleur parent.

Exemple :

function firstCtrl($scope) {
    $scope.$on('someEvent', function(event, data) { console.log(data); });
}

function secondCtrl($scope) {
    $scope.$emit('someEvent', [1,2,3]);
}
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal