情况
嵌套在我们的 Angular 应用程序中的是一个名为 Page 的指令，由一个控制器支持，该控制器包含一个具有 ng-bind-html-unsafe 属性的 div。这被分配给一个名为“pageContent”的 $scope 变量。这个 var 从数据库中获得动态生成的 HTML。当用户翻到下一页时，会调用 DB，并将 pageContent 变量设置为这个新的 HTML，通过 ng-bind-html-unsafe 在屏幕上呈现。这是代码：
页面指令
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
}
}
}
};
});
页面指令的模板（来自上述 templateUrl 属性的“page.html”）
<div ng-controller="PageCtrl" >
...
<!-- dynamic page content written into the div below -->
<div ng-bind-html-unsafe="pageContent" >
...
</div>
页面控制器
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;
});
});
这样可行。我们看到来自 DB 的页面 HTML 在浏览器中很好地呈现。当用户翻到下一页时，我们会看到下一页的内容，以此类推。到目前为止，一切都很好。
问题
这里的问题是我们希望在页面内容中包含交互式内容。例如，HTML 可能包含一个缩略图，当用户点击它时，Angular 应该会做一些很棒的事情，比如显示一个弹出模式窗口。我已经在我们数据库的 HTML 字符串中放置了 Angular 方法调用（ng-click），但当然 Angular 不会识别方法调用或指令，除非它以某种方式解析 HTML 字符串，识别它们并编译它们。
在我们的数据库中
第 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>
第 2 页的内容：
<p>Here's a snake. <img src="snake.png" ng-click="doSomethingAwesone('snake', 'playSound')" >Click to make him hiss.</p>
回到 Page 控制器，然后我们添加相应的 $scope 函数：
页面控制器
$scope.doSomethingAwesome = function( id, action ) {
console.log( "Going to do " + action + " with "+ id );
}
我不知道如何从数据库的 HTML 字符串中调用“doSomethingAwesome”方法。我意识到 Angular 必须以某种方式解析 HTML 字符串，但是如何解析呢？我已经阅读了有关 $compile 服务的含糊不清的内容，并复制并粘贴了一些示例，但没有任何效果。此外，大多数示例显示动态内容仅在指令的链接阶段设置。我们希望 Page 在应用程序的整个生命周期中保持活跃。当用户翻阅页面时，它会不断接收、编译和显示新内容。
在抽象的意义上，我想你可以说我们正在尝试在 Angular 应用程序中动态嵌套 Angular 块，并且需要能够将它们交换进出。
我已经多次阅读各种 Angular 文档，以及各种博客文章，以及 JS Fiddled with people's code。我不知道我是否完全误解了 Angular，或者只是错过了一些简单的东西，或者我很慢。无论如何，我可以使用一些建议。