Em aplicações de grande escala, nossa aplicação web pode ser organizada em páginas parciais separadas para aumentar a modularidade de nossa aplicação. Em alguns casos, a compilação de uma página parcial carregada por meio do XHR ou do pedido Ajax usando Angular $ http.get ou JQuery $ .load apresentará um erro.

Usando meu cenário como exemplo, exatamente estou usando o framework PHP Kohana para poder controlar a modularidade do meu aplicativo da web no nível do servidor. Como de costume, todos os modelos e páginas foram separados, deixando todos os elementos HTML, JS e CSS juntos na camada de apresentação.

Isso dará uma grande flexibilidade para eu implementar a pilha Javascript MVW / MVC no processamento do lado do cliente, já que meu aplicativo web depende muito da solicitação AJAX para buscar dados do aplicativo backend. No meu cenário eu estou usando AngularJS e abaixo é um pseudo simples sobre como os dados do modelo apresentado ao cliente.

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

Uma de minha parte na minha aplicação que realmente me dá uma pancada e me leva a beber algumas garrafas de bebida de metabolismo para resolver a aplicação. É onde eu tenho um diálogo Modal e a página parcial é carregada através do XHR do servidor e anexada ao DOM selecionado.

O problema é quando o Angular tenta compilar a página parcial, quando encontra a diretiva ng-controller estará procurando a função referente à diretiva processada. Erro foram produzir onde o controlador não é encontrado como ainda não avaliado pelo analisador de DOM. Mas quando você pré-delar a função em algum lugar da sua aplicação antes de carregar a página parcial, tudo está OK. Abaixo está o exemplo de como eu configurei um serviço de diálogo que será chamado a partir da diretiva de link quando eu cliquei no link mencionado.

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;
});

Depois de alguma pesquisa eu encontrei alguma solução e compartilhando-a com amigos na minha resposta para outros iniciantes como eu. (Desculpe pelo meu Inglês).