Wie kann ich binden eines benutzerdefinierten Ereignisses in einem angularjs-Direktive?

Ich habe Probleme beim fangen eines Ereignisses, das gesendet wird, wie diese:

document.body.dispatchEvent(event);

In der Richtlinie unten auf ein div-Element, in den Körper hinein:

.directive('myDirective',function(){
  return {
    restrict: 'A',
    link: function(scope, element, attrs, pageCtrl){

      element.bind('myEvent', function(){
        console.log('caught my event!');
      });
    }
  };
});

Dies funktioniert, wenn das Ereignis gesendet wird, mit triggerHandler auf die div.

event = new Event('myEvent');
elem.triggerHandler(event);

Wie kann ich fangen eine benutzerdefinierte Ereignis-die auf den Dokument-Körper in eine Richtlinie?

Update:
Dies ist für die Verwendung in einer Cordova-app mit einem vorhandenen plugin, das löst Ereignisse aus, auf dem Dokument.Körper. So gibt es eine andere Möglichkeit, die ich fangen kann, diese Ereignisse, in eine Richtlinie über ein div?

Zunächst ist es notwendig, in Ihrem Fall zu verwenden, der DOM zu emittieren und auf Ereignisse reagieren? Ich Frage, weil es gibt ein paar Möglichkeiten, in Winkel selbst zu kommunizieren, über Ihre app, inklusive Winkel-eigene event-system.

InformationsquelleAutor AgDude | 2014-05-06

  1. 6

    Das problem ist, dass die Ereignisse Blase bedeutet, dass, wenn Sie Versand der event von document.Körper, es überträgt bis durch seine Vorfahren. Da es sich nicht Reisen und sich über Ihre Nachkommen, Ihre Richtlinie Ereignis-listener nicht gefeuert.

    Können Sie, jedoch, fangen die Veranstaltung auf Körper und Feuer zu deinem div mit Winkel-interne event system.

    Erstellen Sie zwei Richtlinien

    Eins zu schmücken, die body - element mit dem folgenden Verhalten:

    • Fänge der Cordova-event, dann...
    • Sendungen eine Eckige internen Veranstaltung von rootScope
    .directive('bodyDirective',function($rootScope){
  return {
    restrict: 'A',
    link: function(scope, element, attrs){
      element.bind('myEvent', function(){
        $rootScope.$broadcast('cordovaEvent');
      });
    }
  };
})

    ... und anderen schmücken die div mit Verhalten, fangen die Winkel-event:

    .directive('divDirective', function(){
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      scope.$on('cordovaEvent', function(){
        //do something here
      }); 
    }
  } 
})

    Plunker (Sie müssen die Ansicht der Vorschau in einem separaten Fenster und beobachten Sie die Konsole dort)

    Danke. Das ist absolut das problem, das ich mich vor. Bitte siehe mein update.
    Aktualisiert meine Antwort mit einer Art und Weise zu fangen, fangen Sie den Fall auf Ihre div
    Das update funktioniert Super. Und danke für die console Tipp auf Plunker.

    InformationsquelleAutor Marc Kline

Schreibe einen Kommentar