Dans AngularJS, vous pouvez utiliser les mécanismes de diffusion de l'événement de $ Broadcast, $ Emit, $ on pour communiquer entre différentes lunettes.
introduire:
Le but de $ Broadcast est de propager les événements de la portée des parents à la portée de l'enfant, y compris lui-même. Le format est le suivant: $ Broadcast (Eventname, Args)
Le but de $ EMIT est de propager les événements de la portée de l'enfant à la portée des parents, y compris lui-même jusqu'à la portée racine. Le format est le suivant: $ Emit (Eventname, args)
$ on est utilisé pour surveiller les événements propagés à partir des enfants ou des lunettes de parent et des données correspondantes dans la portée. Le format est le suivant: $ on (événement, données)
Dans la description ci-dessus, EventName est le nom de l'événement qui doit être surveillé, l'événement de paramètre dans la méthode $ on est l'objet pertinent de l'événement, et les données sont les données propagées par l'événement.
Le paramètre de l'événement dans la méthode $ on a les propriétés et méthodes suivantes
Attributs d'événements / Méthode Description fonctionnelle
| Propriétés / méthodes de l'événement | Description fonctionnelle |
|---|---|
| event.targetScope | Obtenez la portée de l'événement de propagation |
| event.currentcope | Obtenez la portée de l'événement reçu |
| event.nom | Le nom de l'événement Spread |
| event.stoppropagation () | Empêcher les événements de la propagation des bulles, seulement valable dans $ émit événements |
| event.preventDefault () | Empêcher les événements de propagation de se produire |
| event.DefaultPreveted | Retour True Si l'événement empêché est appelé |
Code:
<! Doctype html> <html ng -pp = "myapp"> <éad> <meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <itle> </ title> <meta charset = "utf-8" /> <script src = "ajjs / angular = angular.module ("myApp", []); // Controller self myApp.Controller ("self", function ($ scope, $ window) {// l'événement de propagation du bouton $ scope.toparent = function () {// enregistrer un événement qui se propage vers le haut, eventname: 'fromsel', data: OneObject $ scope. $ Emit ("From ', {divname:" self "," description: "progater les données"); $ scope.tochild = fonction () {// Enregistrer un événement qui est propagé vers le bas, Eventname: `` From ', Data: OneObject $. $ window.Alert ("Node actuel" + event.currentScope.name + "Événements interceptés de" + data.divname + ":" + event.name + ", sa fonction est" + data.description);}); // Contrôleur parent myApp.Controller ("parent", fonction ($ scope, $ window) {$ scope.name = "parent"; // $ on est utilisé pour les événements $ scope. $ On ("fromsel", function (event, data) {$ window.alert ("Node actuel" + event.currentScope.name + ", intercepté des événements" + data.Divname + ":" + ", des événements interceptés de" + data. La fonction est "+ data.description);}); $ scope. $ on (" fromchild ", fonction (événement, data) {$ window.alert (" nœud actuel "+ event.currentScope.name +", événements interceptés de "+ data.divname +": "+ event.name +", sa "+ data.deScription);});}); // Controller Child MyApp.Controller ("Child", fonction ($ Scope, $ window) {$ scope.name = "child"; // $ on est utilisé pour intercepter les événements de la portée parent $ Scope. $ On ("From self", function (event, data) {$ window.Alert ("Node actuel" + event.currentScope.Name + "Intercept Events de" + data.Divna event.name + ", sa fonction est" + data.deScription);}); </ script> </ head> <body> <form name = "test"> <div ng-controller = "parent"> voici le parent div <div ng-controller = "self"> voici l'enfant selfdiv <entrée type = "Button" ng-Click = "toparent ()" value = "propagate to Parentdiv" /> <entre type = "Button" ng-click = "tochild ()" Value = "Propagate Event à ChildDiv" /> <div ng-Controller = "Child"> Voici l'enfant childdiv <input type = "Button" ng-Click = "TOTOP ()" Value = "Event Event" /> </div> </div> <div ng-controller = "Borthher"> ici BortherDiv </v> </ div> </html>Code
Effet:
Autres propriétés:L'événement ci-dessus diffusé dans AngularJS - Une analyse complète de $ Broadcast, $ Emit, $ on est tout le contenu que je partage avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.