从数据库编译动态HTML字符串
形势
嵌套在我们的角度应用程序中的是一个名为Page的指令,它由一个控制器支持,其中包含一个带有ng-bin-html-不安全属性的div。这被分配给一个名为‘pageContent’的$Scope var。这个var从数据库中得到动态生成的HTML。当用户切换到下一页时,将调用DB,并将pageContent var设置为这个新的HTML,该HTML通过ng-bind-html-不安全在屏幕上呈现。下面是代码:
页指令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
}
}
}
};
});
页面指令模板(“page.html”来自上述templatUrl属性)
...
...
页控制器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可能包含一个缩略图,当用户单击它时,角应该做一些很棒的事情,例如显示弹出模式窗口。我已经在我们的数据库中的HTML字符串中放置了角方法调用(ng-click),但当然角不会识别任何方法调用或指令,除非它以某种方式解析HTML字符串、识别它们并编译它们。