Chargement de Page Partielle Angulaire et Compiler Le Contrôleur

À grande échelle d'application, notre application web peut être s'organiser en séparer partielle page pour augmenter la modularité de notre application. Dans certains cas, la compilation partielle page chargée par XHR ou requête Ajax soit à l'aide Angulaire $http.obtenir ou JQuery $.charge d'introduire une erreur.

À l'aide de mon scénario à titre d'exemple, exactement, je suis en utilisant Kohana framework PHP pour que je puisse contrôler la modularité de mon application web sur le serveur. Comme d'habitude, tous les modèles de page et été séparée en vue, en laissant tout le code HTML, CSS et JS ensemble sur la couche de présentation.

Cela donne une grande flexibilité pour moi de mettre en œuvre le Javascript MVW/MVC pile sur le traitement côté client comme mon web app sont fortement dépendent de la requête AJAX pour récupérer les données à partir de l'arrière de la fin de l'application. Dans mon scénario im en utilisant AngularJS et ci-dessous est un simple pseudo sur la manière dont les données à partir du Modèle présenté au client.

Kohana Modèle > Kohana Contrôleur > Kohana View > XHR > JQuery\Angulaire > DOM

Un de ma part dans mon application qui vraiment me donner la bosse et me faire boire quelques bouteilles de métabolisme de la boisson à résoudre l'application. Est l'endroit où j'ai une boîte de dialogue Modale et la page partielle de charge à travers XHR depuis le serveur, et qu'il l'a attaché à certains DOM.

Le problème, c'est quand Angulaire essayez de compiler la page partielle, lorsqu'il a constaté la ng-controller directive, il sera à la recherche de la fonction se référant au traité de la directive. Erreur étaient produire lorsque le responsable du traitement n'est pas trouvé, comme il n'est pas encore évalué par DOM parser. Mais lorsque vous pré-delare la fonction quelque part dans votre application, juste avant votre charge partielle de la page, tout est OK. Ci-dessous l'exemple sur comment je peux configurer une boîte de Dialogue service qui va être appelée à partir du lien de la directive lorsque j'ai cliqué sur le dit lien.

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

Après quelques recherches, j'ai trouvé une solution et de le partager avec les potes sur ma réponse pour les autres débutants comme moi. (désolé pour mon anglais).