AngularJS : événement de diffusion de la directive

J'ai vu des gens qui font cela à partir de la mesure dans leur code:

$rootScope.$broadcast('someEvent', someParameter);

et puis dans certains contrôleur:

$rootScope.$on('someEvent', function(event, e){ /* implementation here */ });

Maintenant, j'aimerais broacast un événement à partir d'une directive. Est-ce une bonne pratique de la diffuser à rootScope niveau ? Je voudrais gérer cet événement dans un contrôleur. Puis-je utiliser $portée, ou dois-je continuer à écouter sur $rootScope ?

avez-vous isolé champ d'application de la directive de l'utilisation de la portée parent de contrôleur

InformationsquelleAutor Sam | 2013-04-24

angularjs angularjs-scope

78

Dans mon cas, je veux juste de diffuser un événement à partir d'une directive pour le contrôleur de la vue, dans lequel j'utilise la directive. Est-il encore un sens à l'utilisation de diffusion alors?

J'aurais la directive appeler une méthode sur le contrôleur, qui est spécifié dans le code HTML où la directive est utilisée:

Pour une directive qui utilise un isolat portée:
```
<div my-dir ctrl-fn="someCtrlFn(arg1)"></div>

app.directive('myDir', function() {
  return {
    scope: { ctrlFn: '&' },
    link: function(scope, element, attrs) {
       ...
       scope.ctrlFn({arg1: someValue});
    }
```
Pour une directive qui n'utilise pas un isolat portée:
```
<div my-dir ctrl-fn="someCtrlFn(arg1)"></div>

app.directive('myDir', function($parse) {
  return {
    scope: true,  //or no new scope -- i.e., remove this line
    link: function(scope, element, attrs) {
       var invoker = $parse(attrs.ctrlFn);
       ...
       invoker(scope, {arg1: someValue} );
    }
```
- en fait, je le fais déjà. Mais je voulais utiliser l'événement de la radiodiffusion comme je pensais que ça serait mieux de la pratique. N'est-il pas dans ce cas ? $émettent et $sur du bon son 🙂
- Je ne sais pas ce qui est mieux que la pratique. Un événement plus les résultats sont couplage entre la directive et votre contrôleur parce que votre contrôleur de a à écouter pour un événement spécifique que votre directive sera émise. Je préfère utiliser une méthode parce qu'elle est plus explicite/déclarative que la directive est de communiquer avec le contrôleur, et je peux déclarer dans mon HTML comment ça se passe.
- ok, merci pour vos conseils!!!
- Je ne dirais pas un événement résultats dans le couplage. Un événement des montants plus à une pub/sub architecture, qui est un couplage lâche scénario. En d'autres termes, le gestionnaire d'événement ne serait pas appelée si l'événement n'est jamais déclenché, mais il ne va pas provoquer une erreur. De même avec le "& " contrôleur de méthode, si elle n'est pas appelée, elle n'est pas appelée. Je dirais que le seul avantage de la "& " la méthode au cours de l'événement est-il ne pas "consommer" un nom d'événement (qui n'est probablement pas une grosse affaire).
- Merci @blesh. "Couplage" a été un mauvais choix de mot de ma part. Le contrôleur a besoin de connaître le nom d'un événement, ou le contrôleur a besoin de connaître un nom d'attribut (pour la spécification d'une fonction de rappel), de sorte que l'avantage que j'ai mentionné n'existe pas vraiment.
- Pouvez vous s'il vous plaît vérifier cette post?
- Un avantage de rappels sur le cours des événements est plus directement observables ou documentés interaction entre les composants comme observé dans le balisage. Les événements ont une place, mais peut être galvaudé et conduire à un code d'interactions qui sont difficiles à reconnaître et à comprendre. Les événements entre frère directives/contrôleurs ne créer des dépendances. À l'aide d'événements ne sont pas intrinsèquement de réduire le couplage/dépendances. Les enfants ne devraient pas être conscient de ses frères et sœurs ou les parents. Par la circulation de l'information (événements, des données liées, etc.) jusqu'à une mère et à un autre enfant, composants restent réutilisables et plus de résistance aux changements.
InformationsquelleAutor Mark Rajcok
13

Il est généralement une bonne idée de ne pas utiliser le $rootScope comme il est mondial et il ne faut pas polluer sauf si vous savez vraiment ce que vous faites. Je vous recommande de lire cet article sur la communication entre les services, les directives et les contrôleurs.
- selon l'article: "Chaque fois que vous avez un événement à prendre place dans votre application qui affecte tous les contrôleurs et les directives". Dans mon cas, je veux juste de diffuser un même d'une directive, le contrôleur de la vue, dans lequel j'utilise la directive. Est-il encore un sens à l'utilisation de diffusion alors ?
- non, vous ne devriez pas être la radiodiffusion ,de la télédiffusion est destinée à envoyer des événements de portée parent à tous les enfants et des étendues de u sont en train de faire autre façon de contourner
- Oui, si vous voulez écouter les événements à partir d'un contrôleur de parent que vous devriez faire $scope.$emit dans la directive et $scope.$on dans le contrôleur de parent
- Lien utile, merci.
- Je ne crois pas rootScope fonctionne de cette manière, vous pouvez mettre à jour votre réponse pour une version plus récente angulaire
InformationsquelleAutor joakimbl

Voici un Tapuscrit exemple de comment pour appeler une méthode sur le contrôleur intégré la directive. La chose la plus importante à noter est que la directive du nom du paramètre pour votre rappel utilise un & lorsqu'il est défini, et lors de l'appel de rappel que vous ne devez pas utiliser les paramètres positionnels, mais au lieu d'utiliser un objet avec des propriétés ayant les noms des paramètres de la cible.

Registre de la directive lorsque vous créez votre application module:

module MyApp {
    var app: angular.IModule = angular.module("MyApp");
    MyApp.Directives.FileUploader.register(app);
}

Le code d'enregistrement est la suivante:

module MyApp.Directives.FileUploader {
  class FileUploaderDirective implements angular.IDirective {
      public restrict: string = "E";
      public templateUrl: string = "/app/Directives/FileUploader/FileUploaderDirective.html";

      //IMPORTANT - Use & to identify this as a method reference
      public scope: any = {
        onFileItemClicked: "&"
      };
      public controller: string = "MyApp.Directives.FileUploader.Controller";
      public controllerAs: string = "controller";
      public bindToController: boolean = true;
      public transclude: boolean = true;
      public replace: boolean = true;
  }

  export function register(app: angular.IModule) {
      app.controller("MyApp.Directives.FileUploader.Controller", Controller);
      app.directive("fileUploader", () => new FileUploaderDirective());
  }
}

La directive du contrôleur devrait ressembler à ceci

module MyApp.Directives.FileUploader {
    export class Controller {
        public files: string[] = ["One", "Two", "Three"];
        //The callback specified in the view that created this directive instance
        public onFileItemClicked: (fileItem) => void;

        //This is the controller method called from its HTML's ng-click
        public fileItemClicked(fileItem) {
            //IMPORTANT: Don't use comma separated parameters,
            //instead use an object with property names to act as named parameters
            this.onFileItemClicked({
                fileItem: fileItem
            });
        }
    }
}

De la directive HTML ressemblerait à quelque chose comme ceci

<ul>
  <li ng-repeat="item in controller.files" ng-click="controller.fileItemClicked (item)">
    {{ item }}
  </li>
</ul>

La vue principale aura une instance de votre directive comme

<body ng-app="MyApp" ng-controller="MainController as controller">
  <file-uploader on-file-item-clicked="controller.fileItemClicked(fileItem)"/>
</body>

Maintenant, tout ce que vous devez sur votre MainController est une méthode

public fileItemClicked(fileItem) {
  alert("Clicked " + fileItem);
}

Il existe de nombreux types que vous n'avez pas besoin d'écrire à la main...
Goût 🙂
S'en est servi comme d'un modèle à l'appel d'un parent méthode de contrôleur de imbriqué dans la directive 2 niveaux de profondeur. Bien obligé. p.s. Je pense que vous avez une faute de frappe dans la directive du HTML il convient de contrôleur.fileItemClicked pas de contrôleur.onFileItemSelected.
content qu'il était de l'aider, et merci d'avoir signalé mon erreur de code!

InformationsquelleAutor Peter Morris

Vous devez vous connecter pour publier un commentaire.