La portée dans AngularJS a une structure très hiérarchique et bien née. Ils ont tous un $ Rootscope principal (c'est-à-dire l'application angulaire correspondante ou NG-App), puis toutes les autres pièces de portée sont héritées de ce $ Rootscope, ou ils sont imbriqués sous la portée principale. Plusieurs fois, vous constaterez que ces lunettes ne partagent pas les variables ni ne héritent de quoi que ce soit d'un autre prototype.
Donc, dans ce cas, comment communiquez-vous entre les lunettes? Une option consiste à créer un service singleton dans la portée de l'application, puis à gérer les communications pour toutes les sous -copes via ce service.
Il existe une autre option dans AngularJS: gérer les communications grâce à des événements dans la portée. Mais cette approche a certaines limites; Par exemple, vous ne pouvez pas répartir largement les événements à la portée de toutes les surveillance. Vous devez choisir de communiquer avec la portée des parents ou la portée de l'enfant.
$ on, $ Emit et $ diffusent le transfert de l'événement et les données entre les contrôleurs simples.
Les exemples sont les suivants
code html
<div ng-controller = "parentctrl"> <! - parent -> <div ng-controller = "selfctrl"> <! - self -> <a ng-Click = "click ()"> cliquez moi </a> <div ng-controller = "childctrl"> </v> <! - infil <! - parent -> </div>
Code JS
app.Controller ('selfctrl', function ($ scope) {$ scope.click = function () {$ scope. $ Broadcast ('to-child', 'child'); $ scope. $ emit ('to-paren fonction (événement, données) {console.log ('parentctrl', données); $ scope. $ on ('to-child', fonction (événement, données) {console.log ('childctrl', data); // L'enfant peut obtenir la valeur}); $ scope. Fonction ($ Scope) {$ Scope. $ on (to-parent ', fonction (événement, données) {console.log (' Broctrl ', données); // la valeur n'est pas obtenue par le niveau});Résultat final
Parent parentctrl
Enfant
$ emit et $ Broadcast peuvent transmettre plusieurs paramètres, et $ on peut également recevoir plusieurs paramètres.
Le paramètre de l'événement de l'événement dans la méthode $ on, ses propriétés et méthodes d'objet sont les suivantes
| Propriétés de l'événement | But |
|---|---|
| event.targetScope | Portée de l'émission ou de la propagation de l'événement original |
| event.currentcope | Portée des événements actuellement traités |
| event.nom | Nom de l'événement |
| event.stoppropagation () | Une fonction qui empêche les événements de se propager davantage (bouillonner / capturer) (cela ne fonctionne que pour les événements émis avec «$ émit») |
| event.preventDefault () | Cette méthode ne fait rien, mais définira «DefaultPreveted» sur true. Il ne vérifie pas la valeur de «DefaultPreveted» jusqu'à ce que l'implémentateur de l'écouteur d'événements prenne des mesures. |
| event.DefaultPreveted | vrai si `prévention" est appelé |
Cela semble beaucoup plus pratique que la communication de service dans différents contrôleurs ~~
Ce qui précède est une compilation d'informations sur AngularJS $ on, $ émit et $ diffuse. Nous continuerons d'ajouter des informations pertinentes à l'avenir. Merci pour votre soutien à ce site!