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

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); });
}

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]);
}

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]);
}

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!