В крупномасштабном приложении наше веб-приложение может быть организовано на отдельной частичной странице, чтобы повысить модульность нашего приложения. В некоторых случаях компиляция частичной страницы, загруженной с помощью XHR или Ajax-запроса с использованием Angular $ http.get или JQuery $ .load, приведет к ошибке.

Используя мой сценарий в качестве примера, я использую PHP-инфраструктуру Kohana, чтобы я мог контролировать модульность моего веб-приложения на уровне сервера. Как обычно, все шаблоны и страницы были разделены на отдельные представления, оставив все HTML, JS и CSS вместе на уровне представления.

Это даст мне большую гибкость для реализации стека Javascript MVW / MVC при обработке на стороне клиента, так как мое веб-приложение сильно зависит от запроса AJAX для извлечения данных из серверного приложения. В моем сценарии я использую AngularJS и ниже просто псевдо о том, как данные из модели представлены клиенту.

Модель Kohana> Контроллер Kohana> Вид Kohana> XHR> JQuery \ Angular> DOM

Одна из моих частей в моем заявлении, которое действительно дает мне толчок и заставляет меня выпить несколько бутылок метаболического напитка, чтобы решить приложение. Где у меня есть модальное диалоговое окно, и частичная страница загружается через XHR с сервера и прикрепляется к выбранному DOM.

Проблема в том, что когда Angular пытается скомпилировать частичную страницу, когда он обнаружил директиву ng-controller, он будет искать функцию, ссылающуюся на обработанную директиву. Произошла ошибка, когда контроллер не найден, поскольку он еще не оценен анализатором DOM. Но когда вы предварительно делали функцию где-то в своем приложении перед загрузкой частичной страницы, все в порядке. Ниже приведен пример того, как я настраиваю службу Dialog, которая будет вызываться из директивы link, когда я щелкаю по указанной ссылке.

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

После некоторых исследований я нашел какое-то решение и поделился им с ребятами в своем ответе для таких начинающих, как я. (Извините за мой английский).