Взаимодействие AngularJS с устаревшим кодом

Интеграция AngularJS с устаревшими приложениями может представлять проблемы из-за внешних обратных вызовов, которые должны взаимодействовать с платформой Angular . Чтобы решить эту проблему, AngularJS предоставляет несколько механизмов взаимодействия.

Доступ к сервисам Angular из внешнего кода

Один из подходов — создать сервис AngularJS и предоставить методы установки для его обновления. данные. Унаследованный код может затем вызывать эти методы через объект externalInterface AngularJS. Внутри службы функция установки должна инициировать событие, используя шину событий Angular.

Захват событий из служб в контроллерах

Контроллеры могут подписываться на события, создаваемые службами. Для этого сначала определите имя события в сервисе. В контроллере используйте метод $scope.$on() для регистрации прослушивателя событий, который будет перехватывать события с соответствующим именем и выполнять все необходимые обновления пользовательского интерфейса.

Ограничения

Важно отметить, что прямые обновления данных службы из-за пределов AngularJS не всегда могут вызывать обновления в представлении. Это связано с тем, что AngularJS использует механизм односторонней привязки данных. Чтобы обновления отражались в представлении, любые изменения данных или вызовы методов в области видимости должны быть обернуты функцией AngularJS $apply().

Пример

Следующее фрагмент кода демонстрирует, как настроить службу в AngularJS и получить к ней доступ из устаревшего приложения AS3:

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);

В контроллере AngularJS:

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