Communiquer avec les directives de la fratrie

Aucun de la directive require les options vous permettent d'exiger, de frère, de directives (autant que je sache). Vous pouvez seulement:

• exigent sur l'élément, à l'aide de require: "directiveName"
• dire angulaire de la recherche jusqu'à l'arbre du DOM à l'aide de require: "^directiveName"
• ou require: "^?directiveName" si vous n'avez pas nécessairement besoin du contrôleur de parent
• ou require: "^\?directiveName" si vous n'avez pas nécessairement besoin du parent DOM wrapper

Si vous voulez frères et sœurs de la communication, vous aurez pour la maison en quelque parent de l'élément DOM avec une directive contrôleur agissant comme une API pour leur communication. Comment cela est mis en œuvre dépend en grande partie du contexte à la main.

Ici est un bon exemple de Angular JS (O'Reilly)

app.directive('accordion', function() {
  return {
    restrict: 'EA',
    replace: true,
    transclude: true,
    template: '<div class="accordion" ng-transclude></div>',
    controller: function() {

      var expanders = [];

      this.gotOpened = function(selectedExpander) {
        angular.forEach(expanders, function(expander) {
          if(selectedExpander != expander) {
            expander.showMe = false;
          }
        });
      };

      this.addExpander = function(expander) {
        expanders.push(expander);
      }

    }
  }
});

app.directive('expander', function() {
  return {
    restrict: 'EA',
    replace: true,
    transclude: true,
    require: '^?accordion',
    scope: { title:'@' },
    template: '<div class="expander">\n  <div class="title" ng-click="toggle()">{{ title }}</div>\n  <div class="body" ng-show="showMe" \n       ng-animate="{ show: \'animated flipInX\' }"\n ng-transclude></div>\n</div>',
    link: function(scope, element, attrs, accordionController) {
      scope.showMe = false;
      accordionController.addExpander(scope);

      scope.toggle = function toggle() {
        scope.showMe = !scope.showMe;
        accordionController.gotOpened(scope);
      }
    }
  }
})

D'utilisation (jade templating):

accordion
    expander(title="An expander") Woohoo! You can see mme
    expander(title="Hidden") I was hidden!
    expander(title="Stop Work") Seriously, I am going to stop working now.

Les solutions ci-dessus sont grands, et vous devriez certainement envisager l'aide d'un parent pour permettre la communication entre vos directives. Toutefois, si votre application est assez simple, il y a une méthode très simple construit dans Angulaire qui peuvent communiquer entre deux frère étendues sans l'aide de n'importe quel parent: $emit, $broadcast, et $on.

Disons par exemple que vous avez une assez simple application de la hiérarchie avec une barre de navigation zone de recherche qui puise dans une fonction complexe, et vous avez besoin de ce service pour diffuser les résultats de diverses autres directives sur la page. Une façon de le faire serait comme ceci:

dans le service de recherche

$rootScope.$emit('mySearchResultsDone', {
  someData: 'myData'
}); 

dans certains autres directives/contrôleurs de

$rootScope.$on('mySearchResultsDone', function(event, data) {
  vm.results = data;
});

Il y a une certaine beauté à la façon simple que le code est. Cependant, il est important de garder à l'esprit qui émettent le/sur/la diffusion de la logique peut se gâter très rapidement si vous avez un tas de différents endroits de la radiodiffusion et de l'écoute. Une rapide recherche sur google peut tourner beaucoup d'opinions sur le moment où il est et n'est pas un anti-modèle.

Certains bon aperçu des émettent/diffusion/dans ces postes:

• http://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/

• http://nathanleclaire.com/blog/2014/04/19/5-angularjs-antipatterns-and-pitfalls/

J'ai eu exactement le même problème et j'ai été en mesure de le résoudre.

Afin d'obtenir une directive pour cacher d'autres, de frère, de directives, j'ai utilisé un parent directive pour agir à titre de l'API. Un enfant de la directive dit à la mère qu'il n'a pas à être affichés ou masqués par le passage d'une référence à son élément, et l'autre enfant appelle le parent fonction de bascule.

http://plnkr.co/edit/ZCNEoh

app.directive("parentapi", function() {
  return {
    restrict: "E",
    scope: {},
    controller: function($scope) {
      $scope.elements = [];

      var on = true;
      this.toggleElements = function() {
        if(on) {
          on = false;
          _.each($scope.elements, function(el) {
            $(el).hide();
          });
        } else {
          on = true;
          _.each($scope.elements, function(el) {
            $(el).show();
          });
        }
      }

      this.addElement = function(el) {
        $scope.elements.push(el);
      }
    }
  }
});

app.directive("kidtoggle", function() {
  return {
    restrict: "A",
    require: "^parentapi",
    link: function(scope, element, attrs, ctrl) {
      element.bind('click', function() {
        ctrl.toggleElements();  
      });
    }
  }
});

app.directive("kidhide", function() {
  return {
    restrict: "A",
    require: "^parentapi",
    link: function(scope, element, attrs, ctrl) {
      ctrl.addElement(element);
    }
  }  
});