globalna komunikacja w module angular: szyna zdarzeń lub wzór/usługa mediatora

[[3]}powiedziałbym, że nadawanie jest kanciastym sposobem, jak to osiągnąć.

Jednak twój mediator może działać, jeśli przekażesz wewnętrzną funkcję dyrektywy, w przykładzie użyłem metody na scope, ale można to zrobić również metodą kontrolera.

Użyłem dokładnie tej samej fabryki, Co ty.

angular.module("sharedService", []) 
.factory('MessageService',
  function() {
    var MessageService = {};

    var listeners = {};
    var count = 0;
    MessageService.registerListener = function(listener) {
      listeners[count] = listener;
      count++;

      return (function(currentCount) {
        return function() {
          delete listeners[currentCount];
        };
      })(count);
    };

    MessageService.broadcastMessage = function(message) {
      var keys = Object.keys(listeners);

      for (var i = 0; i < keys.length; i++) {
        listeners[keys[i]](message);
      }
    };

    return MessageService;
  }
)

.directive("directiveA", function(MessageService) {
  return {
    link:function(scope) {
      scope.click = function() {
        MessageService.broadcastMessage("broadcasted message");
      };
    },
    template: '<button ng-click="click()">Click</button>'
  }; 
})
.directive("directiveB", function(MessageService) {
  return {
    link:function(scope) {        
      scope.callback = function(message) {
        console.log(message);
      };

      MessageService.registerListener(scope.callback);
    }
  };
});

Pełny przykład: http://jsbin.com/mobifuketi/1/edit?html, js, console, output

Aby być kompletnym, chciałbym dodać, że angular zapewnia również więcej możliwość komunikowania się dyrektyw.

Require atribute

Jeśli Twoje dyrektywy są połączone w hierarchii, możesz użyć atrybutu require, który pozwala ci uzyskać dostęp do innego kontrolera dyrektyw. Jest to zwykle najlepsze rozwiązanie w wielu przypadkach.

.directive("directiveA", function() {
  return {
    require: "^directiveB",

    link: function(scope, element, attrs, directiveCtrl) {

      scope.click = function() {
        directiveCtrl.call();
      };
    },
    template: '<button ng-click="click()">Click</button>'
  }; 
})
.directive("directiveB", function() {
  return {
    controller :function() {
       this.call = function() {

        console.log("method has been called");
      };
    }
  };
});

Pełny przykład: http://jsbin.com/turoxikute/1/edit?html, js, console, output

Using $watch

Jeśli funkcjonalność zależy od danych, a nie od akcji, korzystasz z $watch i react na zmiany danego modelu lub modelu przechowywanego w usłudze shared service, nie jest podobny do listenera, jego podstawowe sprawdzanie zmian. Nazwałem metodę changeState () i log "state changed", aby wszyscy widzieli to wyraźnie.

angular.module("sharedService", []) 
.service("MediatorService", function() {
  this.state = true;

  this.changeState = function() {
     this.state = !this.state;
  };
})

.directive("directiveA", function(MediatorService) {
  return {
    link:function(scope) {

      scope.click = function() {
        MediatorService.changeState();
      };
    },
    template: '<button ng-click="click()">Click</button>'
  }; 
})

.directive("directiveB", function(MediatorService) {
  return {
    link:function(scope) {
        scope.mediator = MediatorService; 
      scope.$watch("mediator.state", function(oldValue, newValue) {
        if (oldValue == newValue) {
          return;
        }  

        console.log("state changed");
      });
    }
  };
});

Pełny przykład: http://jsbin.com/darefijeto/1/edit?html, js, console, output

Lubię autobus eventowy.

Angular dostarcza $emit na $rootScope, ale nie sądzę, że powinno to wiązać twoją decyzję o użyciu go do przepływów opartych na zdarzeniach, jeśli są one złożone lub przewidywalnie złożone. Angular ma wiele funkcji i chociaż większość z nich jest świetna, nawet autorzy przyznają, że mają one głównie uzupełniać dobre zasady inżynierii oprogramowania, a nie je zastępować.

Lubię ten post na using postal.js: kątowy.js event bus z pocztą.js . The two głównymi korzyściami są kanały i koperty, które pozwolą na bardziej jednoznaczną, zrozumiałą i elastyczną logikę opartą na zdarzeniach.

Uważam, że podejścia oparte na usługach są podatne na błędy, jeśli stan nie jest zarządzany ściśle, co jest trudne w przypadku wywołań asynchronicznych i zastrzyków, gdzie nie można być pewnym, w jaki sposób usługa będzie wielofunkcyjna w przyszłości.