Interfacer AngularJS avec le code hérité

L'intégration d'AngularJS avec des applications existantes peut présenter des défis en raison des rappels externes qui doivent interagir avec le framework Angular . Pour résoudre ce problème, AngularJS fournit plusieurs mécanismes d'interopérabilité.

Accès aux services Angular à partir d'un code externe

Une approche consiste à créer un service AngularJS et à exposer des méthodes de définition pour mettre à jour son données. Le code existant peut ensuite appeler ces méthodes via l'objet ExternalInterface d'AngularJS. Au sein du service, la fonction setter doit déclencher un événement à l'aide du bus d'événements Angular.

Capturer les événements des services dans les contrôleurs

Les contrôleurs peuvent s'abonner aux événements émis par les services. Pour ce faire, définissez d'abord un nom d'événement dans le service. Dans le contrôleur, utilisez la méthode $scope.$on() pour enregistrer un écouteur d'événements qui capturera les événements portant le nom approprié et effectuera toutes les mises à jour nécessaires de l'interface utilisateur.

Limitations

Il est important de noter que les mises à jour directes des données du service depuis l'extérieur d'AngularJS ne déclenchent pas toujours des mises à jour dans la vue. En effet, AngularJS utilise un mécanisme de liaison de données unidirectionnel. Pour garantir que les mises à jour sont reflétées dans la vue, toute modification de données ou appel de méthode sur la portée doit être encapsulée dans la fonction $apply() d'AngularJS.

Exemple

Ce qui suit l'extrait de code montre comment configurer un service dans AngularJS et y accéder à partir d'une ancienne application 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);

Dans le contrôleur AngularJS :

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