Sei que essa é uma pergunta antiga, mas eu estava procurando opções para fazer isso recentemente, então pensei em colocar minhas descobertas aqui, caso sejam úteis para alguém.
Na maioria dos casos, se houver a necessidade de código legado externo para interagir com o estado da interface do usuário ou com o funcionamento interno do aplicativo, um serviço pode ser útil para abstrair essas alterações. Se um código externo estiver interagindo diretamente com seu controlador angular, componente ou diretiva, você estará acoplando fortemente seu aplicativo ao código legado, o que é uma má notícia.
O que acabei usando no meu caso é uma combinação de globais acessíveis pelo navegador (janela) e manipulação de eventos. Meu código tem um mecanismo de geração de formulários inteligente que requer saída JSON de um CMS para iniciar os formulários. Aqui está o que eu fiz:
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 ....
O Serviço de Esquema de Formulário é criado usando o injetor angular conforme o esperado:
angular.module('myApp.services').
service('FormSchemaService', ['$window' , FormSchemaService ])
E nos meus controladores: function () {'use strict';
angular.module('myApp').controller('MyController', MyController);
MyEncapsulatorController.$inject = ['$scope', 'FormSchemaService'];
function MyController($scope, formSchemaService) {
// using the already configured formSchemaService
formSchemaService.buildForm();
Até agora, isso é pura programação orientada a serviços angular e javascript. Mas a integração herdada vem aqui:
<script type="text/javascript">
(function(app){
var conf = app.conf = {
'fields': {
'field1: { // field configuration }
}
} ;
app.dispatchEvent(new Event('register-schema'));
})(window);
</script>
Obviamente, toda abordagem tem seus méritos e desvantagens. As vantagens e o uso dessa abordagem dependem da sua interface do usuário. As abordagens sugeridas anteriormente não funcionam no meu caso, pois meu esquema de formulário e código legado não têm controle e conhecimento de escopos angulares. Portanto, a configuração do meu aplicativo com base emangular.element('element-X').scope();
poderia potencialmente interromper o aplicativo se alterarmos os escopos. Mas se o seu aplicativo tem conhecimento do escopo e pode confiar que ele não muda com frequência, o sugerido anteriormente é uma abordagem viável.
Espero que isto ajude. Qualquer feedback também é bem-vindo.
var injector = angular.injector(['ng', 'MyApp']);
. Fazer isso fornecerá um contexto completamente novo e uma duplicatamyService
. Isso significa que você terminará com duas instâncias do serviço e modelo e adicionará dados ao lugar errado. Em vez disso, você deve segmentar um elemento no aplicativo usandoangular.element('#ng-app').injector(['ng', 'MyApp'])
. Nesse ponto, você pode usar $ apply para quebrar as alterações do modelo.