W aplikacji na dużą skalę nasza aplikacja internetowa może być zorganizowana w osobną stronę, aby zwiększyć modułowość naszej aplikacji. W niektórych przypadkach skompilowanie częściowej strony załadowanej przez żądanie XHR lub Ajax przy użyciu Angular $ http.get lub JQuery $ .load spowoduje błąd.

Używając mojego scenariusza jako przykładu, dokładnie używam frameworka PHP Kohany, dzięki czemu mogę kontrolować modułowość mojej aplikacji internetowej na poziomie serwera. Jak zwykle cały szablon i strona zostały rozdzielone w widoku, pozostawiając wszystkie HTML, JS i CSS razem w warstwie prezentacji.

To da mi dużą elastyczność w implementacji stosu Javascript MVW / MVC na przetwarzanie po stronie klienta, ponieważ moja aplikacja internetowa w dużym stopniu zależy od żądania AJAX pobrania danych z aplikacji zaplecza. W moim scenariuszu za pomocą AngularJS i poniżej znajduje się prosty pseudo na temat tego, jak dane z Modelu są prezentowane klientowi.

Kohana Model> Kohana Controller> Kohana View> XHR> JQuery Angular> DOM

Jedna z moich części w mojej aplikacji, która naprawdę daje mi uderzenie i każe mi wypić kilka butelek napoju metabolicznego, aby rozwiązać aplikację. Czy mam okno dialogowe Modal, a częściowa strona jest ładowana przez XHR z serwera i dołączana do wybranego DOM.

Problem polega na tym, że Angular próbuje skompilować częściową stronę, gdy znajdzie dyrektywę ng-controller, będzie szukał funkcji odwołującej się do przetworzonej dyrektywy. Wystąpił błąd, gdy kontroler nie został znaleziony, ponieważ nie został jeszcze oceniony przez parser DOM. Ale gdy wstępnie usuniesz funkcję gdzieś w aplikacji, tuż przed załadowaniem częściowej strony, wszystko jest w porządku. Poniżej znajduje się przykład konfiguracji usługi Dialog, która będzie wywoływana z dyrektywy łącza, gdy kliknęłam wspomniany 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;
});

Po kilku badaniach znalazłem jakieś rozwiązanie i udostępniłem je koleżankom na mojej odpowiedzi dla innych początkujących jak ja. (przepraszam za mój angielski).