Kompilowanie dynamicznych łańcuchów HTML z bazy danych

Sytuacja

Zagnieżdżona w naszej aplikacji Angular jest dyrektywa o nazwie Page, wspierana przez kontroler, który zawiera div z atrybutem ng-bind-html-unsafe. Jest to przypisane do zmiennej $ scope o nazwie 'pageContent'. Ten var otrzymuje przypisany dynamicznie generowany HTML z bazy danych. Gdy użytkownik przewraca się do następnej strony, robi się wywołanie do DB, a pageContent var jest ustawiony na ten nowy HTML, który jest renderowany na ekranie przez NG-bind-html-unsafe. Oto kod:

Page directive

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

Szablon dyrektywy Page ("strona.html " z właściwości templateUrl powyżej)

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

Page controller

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

});

Problem

Problem polega na tym, że chcemy mieć interaktywne treści wewnątrz zawartość strony. Na przykład, HTML może zawierać miniaturkę obrazu, gdzie, gdy użytkownik kliknie na niego, Angular powinien zrobić coś niesamowitego, takiego jak wyświetlanie wyskakującego okna modalnego. Umieściłem wywołania metody Angular (ng-click) w łańcuchach HTML w naszej bazie danych, ale oczywiście Angular nie rozpozna ani wywołań metod, ani dyrektyw, chyba że w jakiś sposób parsuje łańcuch HTML, rozpoznaje je i kompiluje.

W naszym DB

Treść strony 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>

Zawartość strony 2:

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

Z powrotem do kontrolera strony, dodajemy odpowiednią funkcję $scope:

Page controller

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

Nie wiem, jak wywołać metodę 'doSomethingAwesome' z łańcucha HTML z DB. Zdaję sobie sprawę, że Angular musi jakoś parsować łańcuch HTML, ale jak? Czytałem niejasne bełkoty o usłudze $ compile, skopiowałem i wkleiłem kilka przykładów, ale nic nie działa. Ponadto większość przykładów pokazuje dynamiczne treści są ustawiane dopiero w fazie łączenia dyrektywy. Chcielibyśmy, aby strona pozostała żywa przez cały okres użytkowania aplikacji. Stale otrzymuje, kompiluje i wyświetla nowe treści, gdy użytkownik przewraca strony.

W abstrakcyjnym sensie, myślę, że można powiedzieć, że staramy się dynamicznie zagnieżdżać kawałki Angular w aplikacji Angular i musimy być w stanie je wymieniać.

Czytałem kilka razy różne fragmenty dokumentacji kątowej, a także wszystkie wpisy na blogu i JS Nie wiem, czy kompletnie nie rozumiem, czy po prostu brakuje mi czegoś prostego, czy może jestem powolny. W każdym razie, przydałaby mi się Rada.