Interconexión de AngularJS con código heredado

La integración de AngularJS con aplicaciones heredadas puede presentar desafíos debido a las devoluciones de llamadas externas que necesitan interactuar con el marco Angular . Para solucionar esto, AngularJS proporciona varios mecanismos de interoperabilidad.

Acceder a los servicios Angular desde código externo

Un enfoque es crear un servicio AngularJS y exponer métodos de configuración para actualizar su datos. Luego, el código heredado puede llamar a estos métodos a través del objeto ExternalInterface de AngularJS. Dentro del servicio, la función de establecimiento debe activar un evento utilizando el bus de eventos Angular.

Captura de eventos de servicios en controladores

Los controladores pueden suscribirse a eventos emitidos por los servicios. Para hacer esto, primero defina un nombre de evento en el servicio. En el controlador, use el método $scope.$on() para registrar un detector de eventos que detectará eventos con el nombre relevante y realizará las actualizaciones de UI necesarias.

Limitaciones

Es importante tener en cuenta que es posible que las actualizaciones directas de los datos del servicio desde fuera de AngularJS no siempre activen actualizaciones en la vista. Esto se debe a que AngularJS utiliza un mecanismo de enlace de datos unidireccional. Para garantizar que las actualizaciones se reflejen en la vista, cualquier cambio de datos o invocación de métodos en el alcance debe incluirse en la función $apply() de AngularJS.

Ejemplo

Lo siguiente El fragmento de código demuestra cómo configurar un servicio en AngularJS y acceder a él desde una aplicación AS3 heredada:

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

En el controlador AngularJS:

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