Teilweise Seite mit Angular laden und Controller kompilieren

In umfangreichen Anwendungen kann unsere Webanwendung in separate Teilseiten unterteilt sein, um die Modularität unserer Anwendung zu erhöhen. In einigen Fällen führt das Kompilieren einer Teilseite, die über eine XHR- oder Ajax-Anforderung mit Angular $ http.get oder JQuery $ .load geladen wurde, zu einem Fehler.

Am Beispiel meines Szenarios benutze ich genau das Kohana PHP-Framework, damit ich die Modularität meiner Webanwendung auf Serverebene steuern kann. Wie üblich wurden alle Vorlagen und Seiten in der Ansicht getrennt, sodass alle HTML-, JS- und CSS-Elemente auf der Präsentationsebene verbleiben.

Dies gibt mir eine große Flexibilität bei der Implementierung des JavaScript MVW / MVC-Stacks auf der Clientseite, da meine Webanwendung stark von der AJAX-Anforderung zum Abrufen von Daten aus der Back-End-Anwendung abhängt. In meinem Szenario verwende ich AngularJS und unten ist ein einfaches Pseudo darüber, wie die Daten von Model dem Client präsentiert werden.

Kohana-Modell> Kohana-Controller> Kohana-Ansicht> XHR> JQuery \ Angular> DOM

Einer meiner Teile in meiner Anwendung, der mir wirklich eine Beule gibt und mich ein paar Flaschen Stoffwechselgetränk trinken lässt, um die Anwendung zu lösen. Hier habe ich ein Modal-Dialogfeld und die Teilseite werden über XHR vom Server geladen und an das ausgewählte DOM angehängt.

Das Problem besteht darin, dass Angular beim Versuch, die Teilseite zu kompilieren, nach der Funktion sucht, die auf die verarbeitete Anweisung verweist, wenn es die Anweisung ng-controller gefunden hat. Es wurden Fehler erzeugt, bei denen der Controller nicht gefunden wurde, da er noch nicht vom DOM-Parser ausgewertet wurde. Aber wenn Sie die Funktion irgendwo in Ihrer Anwendung vorab löschen, bevor Sie die Teilseite laden, ist alles in Ordnung. Unten ist das Beispiel, wie ich einen Dialog-Dienst einrichte, der von der Link-Direktive aufgerufen wird, wenn ich auf den Link geklickt habe.

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

Nach einigem Nachforschen habe ich eine Lösung gefunden und teile sie mit Freunden über meine Antwort für andere Anfänger wie mich. (Entschuldigung für mein Englisch).

Antworten auf die Frage(2)

Ihre Antwort auf die Frage