En aplicaciones a gran escala, nuestra aplicación web puede organizarse en una página parcial separada para aumentar la modularidad de nuestra aplicación. En algunos casos, la compilación de una página parcial cargada a través de XHR o Ajax utilizando Angular $ http.get o JQuery $ .load presentará un error.

Usando mi escenario como ejemplo, exactamente estoy usando el framework PHP Kohana para poder controlar la modularidad de mi aplicación web en el nivel del servidor. Como es habitual, todas las plantillas y páginas han sido vistas por separado, dejando todos los HTML, JS y CSS juntos en la capa de presentación.

Esto me dará una gran flexibilidad para que pueda implementar la pila de MVW / MVC de Javascript en el procesamiento del lado del cliente, ya que mi aplicación web depende en gran medida de la solicitud de AJAX para obtener datos de la aplicación de back-end. En mi caso, estoy usando AngularJS y debajo hay un pseudo sencillo sobre cómo se presentan los datos del modelo al cliente.

Modelo Kohana> Controlador Kohana> Vista Kohana> XHR> JQuery \ Angular> DOM

Una parte de mi parte en mi aplicación que realmente me dio un golpe y me hizo beber algunas botellas de metabolismo para resolver la aplicación. Es donde tengo un diálogo modal y la página parcial se carga a través de XHR desde el servidor y se adjunta al DOM seleccionado.

El problema es que cuando Angular intenta compilar la página parcial, cuando encuentra la directiva ng-controller buscará la función que se refiere a la directiva procesada. Se produjo un error donde el controlador no se encuentra porque aún no ha sido evaluado por el analizador DOM. Sin embargo, cuando realiza la demora previa de la función en algún lugar de su aplicación justo antes de cargar la página parcial, todo está bien. A continuación se muestra un ejemplo de cómo configuro un servicio de diálogo que se llamará desde la directiva de enlace cuando haga clic en dicho enlace.

var dialogService = angular.module('dialog.service', []);
dialogService.factory('Dialog', function($http,$compile){
    var dialogService = {};
    dialogService.load = function(url, scope){
        $("#dialog:ui-dialog").dialog( "destroy" );
        $("#dialog").attr('title','Atlantis');

        $http.get(url).success(function (data) {
            html = $compile(data)(scope);
            $('#dialog-content').html(html);

            $("#dialog").dialog({
                width: '600px',
                buttons: {
                    "Ok": function() {
                        $( this ).dialog( "close" );
                        return true;
                    },
                },
                close: function(){
                    if (typeof (onClose) == 'function') { onClose(); }
                },
            });
        });
    }

    return dialogService;
});

Después de algunas investigaciones, he encontrado una solución y la he compartido con mis amigos sobre mi respuesta para otros principiantes como yo. (Lo siento por mi ingles).