Je sais que c'est une vieille question, mais je cherchais des options pour le faire récemment, alors j'ai pensé mettre mes conclusions ici au cas où cela serait utile à quiconque.
Dans la plupart des cas, s'il est nécessaire que du code hérité externe interagisse avec l'état de l'interface utilisateur ou le fonctionnement interne de l'application, un service peut être utile pour résumer ces modifications. Si un code externe interagit directement avec votre contrôleur angulaire, composant ou directive, vous associez fortement votre application à votre code hérité, ce qui est une mauvaise nouvelle.
Ce que j'ai fini par utiliser dans mon cas, c'est une combinaison de globaux accessibles par navigateur (ie fenêtre) et de gestion d'événements. Mon code a un moteur de génération de formulaires intelligent qui nécessite une sortie JSON d'un CMS pour initier les formulaires. Voici ce que j'ai fait:
function FormSchemaService(DOM) {
var conf = DOM.conf;
// This event is the point of integration from Legacy Code
DOM.addEventListener('register-schema', function (e) {
registerSchema(DOM.conf);
}, false);
// service logic continues ....
Le service de schéma de formulaire est créé à l'aide d'un injecteur angulaire comme prévu:
angular.module('myApp.services').
service('FormSchemaService', ['$window' , FormSchemaService ])
Et dans mes contrôleurs: function () {'use strict';
angular.module('myApp').controller('MyController', MyController);
MyEncapsulatorController.$inject = ['$scope', 'FormSchemaService'];
function MyController($scope, formSchemaService) {
// using the already configured formSchemaService
formSchemaService.buildForm();
Jusqu'à présent, il s'agit d'une programmation orientée service angulaire et javascript pure. Mais l'intégration héritée vient ici:
<script type="text/javascript">
(function(app){
var conf = app.conf = {
'fields': {
'field1: { // field configuration }
}
} ;
app.dispatchEvent(new Event('register-schema'));
})(window);
</script>
De toute évidence, chaque approche a ses avantages et ses inconvénients. Les avantages et l'utilisation de cette approche dépendent de votre interface utilisateur. Les approches suggérées précédemment ne fonctionnent pas dans mon cas car mon schéma de formulaire et mon code hérité n'ont aucun contrôle et aucune connaissance des portées angulaires. Par conséquent, la configuration de mon application en fonction de angular.element('element-X').scope();
pourrait potentiellement casser l'application si nous changeons les portées autour. Mais si votre application connaît la portée et peut compter sur elle pour ne pas changer souvent, ce qui a été suggéré précédemment est une approche viable.
J'espère que cela t'aides. Tout commentaire est également le bienvenu.
var injector = angular.injector(['ng', 'MyApp']);
. Cela vous donnera un tout nouveau contexte et un doublonmyService
. Cela signifie que vous vous retrouverez avec deux instances du service et du modèle et que vous ajouterez des données au mauvais endroit. Vous devez plutôt cibler un élément de l'application à l'aide deangular.element('#ng-app').injector(['ng', 'MyApp'])
. À ce stade, vous pouvez ensuite utiliser $ apply pour encapsuler les modifications de modèle.