Директива-директивная связь в AngularJS?

Я уже знаю, что вы можете настроить контроллер в директиве и что другие директивы могут вызывать функции на этом контроллере. Вот как выглядит моя текущая директива:

app.directive("foobar", function() {
  return {
    restrict: "A",
    controller: function($scope) {
      $scope.trigger = function() {
        // do stuff
      };
    },
    link: function(scope, element) {
     // do more stuff
    }
  };
});

Я знаю, что могу назвать это следующим образом:

app.directive("bazqux", function() {
  return {
    restrict: "A",
    require: "foobar",
    link: function(scope, element, attrs, fooBarCtrl) {
        fooBarCtrl.trigger();
    }
  };
});

Однако, я хочу иметь возможность вызвать триггер из любой директивы, а не только из моих собственных пользовательских, например:

<button ng-click="foobar.trigger()">Click me!</button>

Если это не сработает, есть ли способ внести третью директиву, чтобы это произошло? Как это?

<button ng-click="trigger()" target-directive="foobar">Click me!</button>

Спасибо!

Ответы

Ответ 1

Одним простым способом достижения общесистемной связи между любыми компонентами было бы использование глобальных событий (испускаемых из $rootScope). Например:

JS:

app.directive('directiveA', function($rootScope)
{
    return function(scope, element, attrs)
    {
        // You can attach event listeners in any place (controllers, too)

        $rootScope.$on('someEvent', function()
        {
            alert('Directive responds to a global event');
        });
    };
});

HTML:

<button ng-click="$emit('someEvent')">Click me!</button>

Здесь вы выделяете событие из области дочернего объекта, но в конечном итоге оно достигнет $rootScope и запустит предыдущий прослушиватель.

Вот живой пример: http://plnkr.co/edit/CpKtR5R357tEP32loJuG?p=preview

Ответ 2

Похоже, вам нужен сервис angular. http://docs.angularjs.org/guide/dev_guide.services

Это позволит вам делиться функциональностью по всем директивам.

Здесь аналогичный вопрос: Обмен данными между директивами

Ответ 3

При разговоре на irc выяснилось, что связь не нужна:

У меня есть директива с ограничениями атрибутов, которая выполняет некоторые манипуляции с DOM в своем родительском элементе, когда она "срабатывает"

Решение состоит в том, чтобы сохранить логику внутри одной и той же директивы и просто применить изменения dom к родительскому. http://jsfiddle.net/wt2dD/5/

scope.triggerSmthOnParent = function () {
    element.parent().toggleClass('whatewer');
}