Comment `$scope.$emit` et `$scope.$on` facilitent-ils la communication entre contrôleurs dans AngularJS ?

Travailler avec $scope.$emit et $scope.$on

Dans AngularJS, la communication entre les contrôleurs peut être réalisée à l'aide de $scope Méthodes .$emit et $scope.$on. Ces méthodes facilitent la communication basée sur les événements, permettant de diffuser des données ou des signaux d'un contrôleur à un autre.

$scope.$emit et $scope.$on : expliqué

• $scope.$emit : Émet un événement qui se propage vers le haut à travers le scope hiérarchie.
• $scope.$on : Écoute un événement avec un nom spécifique et exécute une fonction de rappel lorsque l'événement est déclenché.

La relation parent-enfant est importante

L'efficacité de ces méthodes dépend de la relation parent-enfant entre les portées du contrôleurs impliqués. Deux types de répartition d'événements sont disponibles :

• $scope.$broadcast : Distribue l'événement vers le bas à toutes les portées enfants.
• $scope. $emit : Distribue l'événement vers le haut à travers la portée hiérarchie.

Exemples de scénarios

1. Relation de portée parent-enfant :

Si la portée du premier contrôleur ($scope.$emit) est un parent du deuxième contrôleur ($scope.$on), le code suivant devrait fonctionner :

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

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

2. Aucune relation de portée parent-enfant :

S'il n'y a pas de relation parent-enfant, vous pouvez injecter $rootScope dans le contrôleur et diffuser l'événement à toutes les portées enfants :

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

3. Envoi de l'enfant au parent :

Pour envoyer un événement d'un contrôleur enfant à un contrôleur parent, utilisez $scope.$emit. Si la portée du premier contrôleur ($scope.$on) est un parent du deuxième contrôleur ($scope.$emit) :

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

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

En comprenant comment $scope.$emit et $scope. $au travail, vous pouvez communiquer efficacement entre les contrôleurs de vos applications AngularJS.

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!