Anbindung von AngularJS mit Legacy-Code

Die Integration von AngularJS mit Legacy-Anwendungen kann aufgrund der externen Rückrufe, die mit dem Angular-Framework interagieren müssen, Herausforderungen darstellen . Um dieses Problem zu lösen, bietet AngularJS mehrere Mechanismen für die Interoperabilität.

Zugriff auf Angular-Dienste über externen Code

Ein Ansatz besteht darin, einen AngularJS-Dienst zu erstellen und Setter-Methoden bereitzustellen, um ihn zu aktualisieren Daten. Der Legacy-Code kann diese Methoden dann über das ExternalInterface-Objekt von AngularJS aufrufen. Innerhalb des Dienstes sollte die Setter-Funktion ein Ereignis über den Angular-Ereignisbus auslösen.

Ereignisse von Diensten in Controllern erfassen

Controller können von Diensten ausgegebene Ereignisse abonnieren. Definieren Sie dazu zunächst einen Event-Namen im Service. Verwenden Sie im Controller die Methode $scope.$on(), um einen Ereignis-Listener zu registrieren, der Ereignisse mit dem entsprechenden Namen abfängt und alle erforderlichen UI-Aktualisierungen durchführt.

Einschränkungen

Es ist wichtig zu beachten, dass direkte Aktualisierungen der Dienstdaten von außerhalb von AngularJS möglicherweise nicht immer Aktualisierungen in der Ansicht auslösen. Dies liegt daran, dass AngularJS einen unidirektionalen Datenbindungsmechanismus verwendet. Um sicherzustellen, dass Aktualisierungen in der Ansicht widergespiegelt werden, sollten alle Datenänderungen oder Methodenaufrufe im Bereich in die Funktion $apply() von AngularJS eingeschlossen werden.

Beispiel

Das Folgende Das Code-Snippet zeigt, wie man einen Dienst in AngularJS einrichtet und von einem älteren AS3 aus darauf zugreift application:

angular.module('myApp').service('myService', function () {
  this.data = [];

  this.setData = function (data) {
    this.data.push(data);
    this.$emit('dataUpdated', data);
  };
});

// in legacy AS3 code
ExternalInterface.call("myService.setData", data);

Im AngularJS-Controller:

$scope.$on('dataUpdated', function (event, data) {
  // update the UI with the received data
});