So che questa è una vecchia domanda ma stavo cercando opzioni per farlo di recente, quindi ho pensato di mettere le mie scoperte qui nel caso fosse utile a chiunque.
Nella maggior parte dei casi, se è necessario che il codice legacy esterno interagisca con lo stato dell'interfaccia utente o il funzionamento interno dell'applicazione, un servizio potrebbe essere utile per sottrarre tali modifiche. Se un codice esterno interagisce direttamente con il tuo controller angolare, componente o direttiva, stai accoppiando pesantemente la tua app con il tuo codice legacy, che è una cattiva notizia.
Quello che ho finito per usare nel mio caso è una combinazione di globi accessibili dal browser (ad es. Finestra) e gestione degli eventi. Il mio codice ha un motore di generazione di moduli intelligente che richiede l'output JSON da un CMS per avviare i moduli. Ecco cosa ho fatto:
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 ....
Il servizio Schema del modulo viene creato utilizzando l'iniettore angolare come previsto:
angular.module('myApp.services').
service('FormSchemaService', ['$window' , FormSchemaService ])
E nei miei controller: function () {'use strict';
angular.module('myApp').controller('MyController', MyController);
MyEncapsulatorController.$inject = ['$scope', 'FormSchemaService'];
function MyController($scope, formSchemaService) {
// using the already configured formSchemaService
formSchemaService.buildForm();
Finora si tratta di pura programmazione orientata al servizio angolare e javascript. Ma l'integrazione legacy arriva qui:
<script type="text/javascript">
(function(app){
var conf = app.conf = {
'fields': {
'field1: { // field configuration }
}
} ;
app.dispatchEvent(new Event('register-schema'));
})(window);
</script>
Ovviamente ogni approccio ha i suoi vantaggi e svantaggi. I vantaggi e l'uso di questo approccio dipendono dalla tua interfaccia utente. Gli approcci precedentemente suggeriti non funzionano nel mio caso poiché il mio schema del modulo e il codice legacy non hanno controllo e conoscenza degli ambiti angolari. Quindi la configurazione della mia app in base angular.element('element-X').scope();
potrebbe potenzialmente interrompere l'app se cambiamo gli ambiti intorno. Ma se la tua app è a conoscenza dell'ambito e può fare affidamento sul fatto che non cambia spesso, ciò che è stato suggerito in precedenza è un approccio praticabile.
Spero che questo ti aiuti. Qualsiasi feedback è anche il benvenuto.
var injector = angular.injector(['ng', 'MyApp']);
. In questo modo ti darà un contesto completamente nuovo e un duplicatomyService
. Ciò significa che finirai con due istanze del servizio e del modello e aggiungerai i dati nel posto sbagliato. Dovresti invece scegliere come target un elemento all'interno dell'appangular.element('#ng-app').injector(['ng', 'MyApp'])
. A questo punto puoi quindi usare $ apply per racchiudere le modifiche al modello.