La compilation de HTML dynamique des chaînes à partir de la base de données

La Situation

Imbriquée à l'intérieur de notre Angulaire de l'app est une directive appelée Page, soutenu par un contrôleur, qui contient un div avec un ng-bind-html-dangereux attribut. Il est affecté à un $portée var appelé "au contenu de la page'. Cette variable est affectée HTML générées dynamiquement à partir d'une base de données. Lorsque l'utilisateur retourne à la page suivante, a appelé à la DB est faite, et le au contenu de la page var est définie à ce nouveau format HTML, ce qui est rendu à l'écran par le biais de ng-bind-html-dangereux. Voici le code:

Directive de Page

angular.module('myApp.directives')
    .directive('myPage', function ($compile) {

        return {
            templateUrl: 'page.html',
            restrict: 'E',
            compile: function compile(element, attrs, transclude) {
                //does nothing currently
                return {
                    pre: function preLink(scope, element, attrs, controller) {
                        //does nothing currently
                    },
                    post: function postLink(scope, element, attrs, controller) {
                        //does nothing currently
                    }
                }
            }
        };
    });

Directive de Page du modèle ("page.html" à partir de la templateUrl de la propriété ci-dessus)

<div ng-controller="PageCtrl" >
   ...
   <!-- dynamic page content written into the div below -->
   <div ng-bind-html-unsafe="pageContent" >
   ...
</div>

Contrôleur de la Page

angular.module('myApp')
  .controller('PageCtrl', function ($scope) {

        $scope.pageContent = '';

        $scope.$on( "receivedPageContent", function(event, args) {
            console.log( 'new page content received after DB call' );
            $scope.pageContent = args.htmlStrFromDB;
        });

});

Qui fonctionne. Nous voyons le HTML de la page à partir de la DB rendu bien dans le navigateur. Lorsque l'utilisateur retourne à la page suivante, nous voyons le prochain contenu de la page, et ainsi de suite. So far So good.

Le Problème

Le problème ici est que nous voulons avoir du contenu interactif à l'intérieur du contenu d'une page. Par exemple, le code HTML peut contenir une image miniature où, lorsque l'utilisateur clique dessus, Angulaire doit faire quelque chose de génial, comme l'affichage d'une pop-up fenêtre modale. J'ai placé Angulaire des appels de méthode (ng-click) dans le code HTML de chaînes dans notre base de données, mais bien sûr Angulaire ne va pas le reconnaître soit les appels de méthode ou de directives, à moins que de toute façon il analyse le code HTML de la chaîne, les reconnaît et les compile.

Dans notre DB

De contenu pour la Page 1:

<p>Here's a cool pic of a lion. <img src="lion.png" ng-click="doSomethingAwesone('lion', 'showImage')" > Click on him to see a large image.</p>

De contenu pour la Page 2:

<p>Here's a snake. <img src="snake.png" ng-click="doSomethingAwesone('snake', 'playSound')" >Click to make him hiss.</p>

De retour dans le contrôleur de la Page, puis on lui ajoute le montant correspondant de la portée de la fonction:

Contrôleur de la Page

$scope.doSomethingAwesome = function( id, action ) {
    console.log( "Going to do " + action + " with "+ id );
}

Je ne peux pas comprendre comment l'appeler 'doSomethingAwesome' méthode à partir de la chaîne HTML à partir de la DB. Je me rends compte Angulaire doit analyser la chaîne HTML en quelque sorte, mais comment? J'ai lu vague mumblings sur le $compiler service, et copié et collé quelques exemples, mais rien ne fonctionne. Aussi, la plupart des exemples afficher du contenu dynamique que se déroule pendant la liaison de la phase de la directive. Nous voulons la Page pour rester en vie tout au long de la durée de vie de l'application. Il reçoit constamment, compile et affiche le nouveau contenu que l'utilisateur feuillette les pages.

Dans un sens abstrait, je suppose que vous pourriez dire que nous essayons de façon dynamique nid morceaux Angulaire dans Angulaire de l'app, et doivent être en mesure de swap et sortir.

J'ai lu les différents bits de l'Angulaire de la documentation à plusieurs reprises, ainsi que toutes sortes de messages de blog, et JS Jouait avec les gens du code. Je ne sais pas si je suis complètement malentendu Angulaire, ou manque juste quelque chose de simple, ou peut-être que je suis lent. En tout cas, je pourrais utiliser un peu des conseils.