Qu’est-ce que. $ On () dans AngularJS

$on est lié à $broadcast et $emit – ce qui permet de déclencher du code depuis d’autres endroits.

La première chose à propos de $on on devrait savoir est que c’est une méthode de $scope

La deuxième chose que vous devez savoir est que le préfixe $ fait référence à une méthode angular, tandis que les préfixes $$ font référence aux méthodes angulars que vous devriez éviter d’utiliser.

Maintenant, entrons dans les détails sur ce qu’est $on .

Vous trouverez ci-dessous un exemple de modèle et de ses contrôleurs. Nous explorerons comment $broadcast/$on peut nous aider à réaliser ce que nous voulons.

 
  Register  
 
 Registered Name:   

Les contrôleurs sont

 app.controller('FirstCtrl', function($scope){ $scope.register = function(){ } }); app.controller('SecondCtrl', function($scope){ }); 

Ma question est la suivante: comment passez-vous le nom au second contrôleur lorsqu’un utilisateur clique sur Register? Vous pouvez proposer plusieurs solutions, mais celle que nous allons utiliser utilise $ broadcast et $ on.

$ broadcast vs $ emit

Que devrions-nous utiliser? $ broadcast acheminera vers tous les éléments dom des enfants et $ emit ira dans la direction opposée à tous les éléments dom des ancêtres.

Le meilleur moyen d’éviter de décider entre $ emit ou $ broadcast est de diffuser depuis $ rootScope et d’utiliser $ broadcast à tous ses enfants. Ce qui rend notre cas beaucoup plus facile puisque nos éléments dom sont frères et sœurs.

Ajouter $ rootScope et permet à $ broadcast

 app.controller('FirstCtrl', function($rootScope, $scope){ $scope.register = function(){ $rootScope.$broadcast('BOOM!', $scope.name) } }); 

Notez que nous avons ajouté $ rootScope et que nous utilisons maintenant $ broadcast (broadcastName, arguments). Pour broadcastName, nous voulons lui donner un nom unique afin que nous puissions attraper ce nom dans notre secondCtrl. J’ai choisi BOOM! juste pour le fun. Le second argument «arguments» nous permet de transmettre des valeurs aux auditeurs.

Recevoir notre émission

Dans notre deuxième contrôleur, nous devons configurer le code pour écouter notre diffusion

 app.controller('SecondCtrl', function($scope){ $scope.$on('BOOM!', function(events, args){ console.log(args); $scope.name = args; //now we've registered! }) }); 

C’est vraiment aussi simple. Exemple Live

Autres moyens d’obtenir des résultats similaires

Essayez d’éviter d’utiliser cette suite de méthodes car elle n’est ni efficace ni facile à gérer, mais c’est un moyen simple de résoudre vos problèmes.

Vous pouvez généralement faire la même chose en utilisant un service ou en simplifiant vos contrôleurs. Nous ne discuterons pas de cela en détail, mais je pensais juste en parler pour être complet.

Enfin, gardez à l’esprit qu’une émission vraiment utile à écouter est «$ destroy», vous pouvez voir à nouveau que $ signifie une méthode ou un object créé par les codes du fournisseur. De toute façon, $ destroy est diffusé lorsqu’un contrôleur est détruit, vous pouvez écouter ceci pour savoir quand votre contrôleur est supprimé.