Angular y HTML Dinámico


Voy a describir dos técnicas para conectar Angular con HTML Dinámico:

HTML Dinámico y Angular

El procesado de los controladores se realiza al cargar la pagina HTML. En las web complejas solemos usar HTML Dinámico. En este caso el procesado de los controladores no se realiza para el bloque cargado posteriormente.
Se ha de forzar a Angular para que lo compile:

var injector = angular.injector(['ng']);
injector.invoke(function($rootScope, $compile) {
   var scopeModel = $rootScope.$new();
   $compile(dynamicHtml)(scopeModel);
});

En caso de utilizar módulos (practica muy recomendada ;-)), en el injector tendríamos que indicar los módulos usados.
Por ejemplo un caso de uso normal, son las llamadas AJAX que retornan un bloque de HTML que insertamos en la pagina actual.

			
	$.ajax({
		url: "test.html",
		cache: false
	})
	.done(function( html ) {
            var dynamicHtml = $('#dynamicHtml');
            dynamicHtml.html(html);
            var injector = angular.injector(['ng']);
            injector.invoke(function($rootScope, $compile) {
                var scopeModel = $rootScope.$new();
                $compile(dynamicHtml)(scopeModel);
                //On destroy to avoid memory leaks
                dynamicHtml.on('remove', function () {
                    scopeModel.destroy();
                });                    
	    });	
	});

Si el HTML Dinámico puede ser destruido; hemos de asegurarnos de eliminar también el contexto de Angular para evitar perdidas de memoria.

Realizar petición al Controlador desde fuera del Angular

Normalmente los métodos del controlador son invocados por eventos de la vista o llamadas internas.
En alguna ocasión excepcionalmente (no creo que sea una practica recomendada :-(), nos puede interesar llamarlo desde fuera del entorno. Se puede acceder al scope del controlador a partir del elemento HTML que gestiona el controlador.

var scope = angular.element($('#elementoHtml')).scope();
scope.metododelControlador().

Por ejemplo, en respuesta a un evento externo (en este caso de un hub de SignalR).

var infoHub = $.connection.infoHub;
infoHub.client.refreshInfo = function (info) {
    var scope = angular.element($('#divInfo)).scope();
    scope.refreshInfo(info);
}
Anuncios
Esta entrada fue publicada en Angular. Guarda el enlace permanente.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s