Sé que esta es una vieja pregunta, pero estaba buscando opciones para hacer esto recientemente, así que pensé en poner mis hallazgos aquí en caso de que sea útil para alguien.
En la mayoría de los casos, si existe la necesidad de un código heredado externo para interactuar con el estado de la interfaz de usuario o el funcionamiento interno de la aplicación, un servicio podría ser útil para abstraer esos cambios. Si un código externo interactúa directamente con su controlador angular, componente o directiva, está acoplando su aplicación en gran medida con su código heredado, lo cual es una mala noticia.
Lo que terminé usando en mi caso, es una combinación de globales accesibles para el navegador (es decir, ventana) y manejo de eventos. Mi código tiene un motor de generación de formularios inteligente que requiere la salida JSON de un CMS para iniciar los formularios. Esto es lo que he hecho:
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 ....
El servicio de esquema de formulario se crea utilizando un inyector angular como se esperaba:
angular.module('myApp.services').
service('FormSchemaService', ['$window' , FormSchemaService ])
Y en mis controladores: function () {'use estricto';
angular.module('myApp').controller('MyController', MyController);
MyEncapsulatorController.$inject = ['$scope', 'FormSchemaService'];
function MyController($scope, formSchemaService) {
// using the already configured formSchemaService
formSchemaService.buildForm();
Hasta ahora, esta es una programación puramente angular y orientada al servicio de JavaScript. Pero la integración heredada viene aquí:
<script type="text/javascript">
(function(app){
var conf = app.conf = {
'fields': {
'field1: { // field configuration }
}
} ;
app.dispatchEvent(new Event('register-schema'));
})(window);
</script>
Obviamente, cada enfoque tiene sus méritos e inconvenientes. Las ventajas y el uso de este enfoque dependen de su interfaz de usuario. Los enfoques sugeridos anteriormente no funcionan en mi caso, ya que mi esquema de formulario y mi código heredado no tienen control ni conocimiento de los ámbitos angulares. Por lo tanto, configurar mi aplicación en función angular.element('element-X').scope();
podría romper la aplicación si cambiamos los ámbitos. Pero si su aplicación tiene conocimiento del alcance y puede confiar en que no cambiará con frecuencia, lo que se sugiere anteriormente es un enfoque viable.
Espero que esto ayude. Cualquier comentario también es bienvenido.
var injector = angular.injector(['ng', 'MyApp']);
. Hacer esto le dará un contexto completamente nuevo y un duplicadomyService
. Eso significa que terminará con dos instancias del servicio y el modelo y agregará datos al lugar equivocado. En su lugar, debe apuntar a un elemento dentro de la aplicación utilizandoangular.element('#ng-app').injector(['ng', 'MyApp'])
. En este punto, puede usar $ apply para ajustar los cambios del modelo.