Comment intégrer les contrôles AngularJS avec du code hérité nécessitant des rappels de fenêtre DOM ?

Appelez AngularJS à partir du code hérité

Problème :
Vous devez intégrer les contrôles AngularJS avec un Flex existant application qui nécessite des rappels attachés à la fenêtre DOM.

Solution :

Pour distribuer des événements que les contrôleurs AngularJS peuvent écouter depuis l'extérieur du framework, suivez ces étapes :

1. Obtenez la portée et l'injecteur :

   • Utilisez angulaire.element(domElement).scope() pour obtenir la portée actuelle du HTML élément utilisé pour mettre à jour l'application AngularJS.
   • Utilisez angulaire.element(domElement).injector() pour accéder à l'injecteur d'application actuel.

2. Obtenez le service AngularJS :

   • Depuis l'injecteur, obtenez le service AngularJS que vous souhaitez mettre à jour.

3. Invoquer les fonctions AngularJS :

   • Dans AngularJS, enveloppez toutes les mises à jour des invocations de modèle ou de méthode sur la portée dans $apply(function(){ ... }) pour garantir une propagation correcte des modifications. .

Exemple d'utilisation :

// Get the AngularJS scope and service
var scope = angular.element(document.getElementsByTagName('body')[0]).scope();
var service = scope.injector().get('myService');

// Invoke an AngularJS method
scope.$apply(function () {
  service.update();
});

Notes supplémentaires :

• Les modifications apportées au modèle AngularJS ou aux invocations de méthodes de portée doivent être enveloppées dans $apply().
• Vous pouvez utiliser angulaire.element(domElement).controller() pour accéder au contrôleur AngularJS associé à l'élément HTML.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!