Die Situation

In unserer Angular-App ist eine Direktive namens Page eingebettet, die von einem Controller unterstützt wird und ein div mit dem Attribut ng-bind-html-unsafe enthält. Dies ist einer $ scope-Variable namens 'pageContent' zugeordnet. Diese Variable wird dynamisch generiertem HTML aus einer Datenbank zugewiesen. Wenn der Benutzer zur nächsten Seite wechselt, wird ein Aufruf der Datenbank durchgeführt und die Variable pageContent auf diesen neuen HTML-Code gesetzt, der über ng-bind-html-unsafe auf dem Bildschirm dargestellt wird. Hier ist der Code:

Seitenanweisung

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

Vorlage der Seitenanweisung ("page.html" aus der obigen templateUrl-Eigenschaft)

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

Seitencontroller

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

});

Das funktioniert. Wir sehen den HTML-Code der Seite aus der Datenbank im Browser. Wenn der Benutzer zur nächsten Seite wechselt, sehen wir den Inhalt der nächsten Seite und so weiter. So weit, ist es gut.

Das Problem

Das Problem hier ist, dass wir interaktiven Inhalt innerhalb des Inhalts einer Seite haben möchten. Beispielsweise kann der HTML-Code ein Miniaturbild enthalten, in dem Angular beim Klicken des Benutzers eine großartige Aktion ausführen sollte, z. B. das Anzeigen eines modalen Popup-Fensters. Ich habe Angular-Methodenaufrufe (ng-click) in die HTML-Zeichenfolgen in unserer Datenbank eingefügt, aber natürlich erkennt Angular weder Methodenaufrufe noch Direktiven, es sei denn, es analysiert die HTML-Zeichenfolge irgendwie, erkennt sie und kompiliert sie.

In unserer DB

Inhalt für Seite 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>

Inhalt für Seite 2:

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

Zurück im Page-Controller fügen wir dann die entsprechende $ scope-Funktion hinzu:

Seitencontroller

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

Ich kann nicht herausfinden, wie diese 'doSomethingAwesome'-Methode in der HTML-Zeichenfolge aus der DB aufgerufen wird. Mir ist klar, dass Angular den HTML-String irgendwie analysieren muss, aber wie? Ich habe ein vages Murmeln über den $ compile-Dienst gelesen und einige Beispiele kopiert und eingefügt, aber nichts funktioniert. Außerdem zeigen die meisten Beispiele, dass dynamischer Inhalt nur während der Verknüpfungsphase der Direktive festgelegt wird. Wir möchten, dass Page während der gesamten Laufzeit der App am Leben bleibt. Es empfängt, kompiliert und zeigt ständig neue Inhalte an, während der Benutzer durch die Seiten blättert.

In einem abstrakten Sinne könnte man sagen, dass wir versuchen, Angular-Blöcke dynamisch in einer Angular-App zu verschachteln, und in der Lage sein müssen, sie ein- und auszutauschen.

Ich habe verschiedene Teile der Angular-Dokumentation sowie alle möglichen Blog-Beiträge mehrmals gelesen und JS hat mit dem Code von Leuten herumgespielt. Ich weiß nicht, ob ich Angular völlig missverstehe oder nur etwas Einfaches vermisse oder ob ich langsam bin. In jedem Fall könnte ich einen Rat gebrauchen.