从数据库编译动态HTML字符串

Question

从数据库编译动态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属性)

<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可能包含一个缩略图，当用户单击它时，角应该做一些很棒的事情，例如显示弹出模式窗口。我已经在我们的数据库中的HTML字符串中放置了角方法调用(ng-click)，但当然角不会识别任何方法调用或指令，除非它以某种方式解析HTML字符串、识别它们并编译它们。

Answer 1

在角为1.2.10的直线上scope.$watch(attrs.dynamic, function(html) {返回无效字符错误，因为它试图查看attrs.dynamic那是html文本。我通过从作用域属性中获取属性来修正这个问题。 scope: { dynamic: '=dynamic'},我的例子angular.module('app')   .directive('dynamic', function ($compile) {     return {       restrict: 'A',       replace: true,       scope: { dynamic: '=dynamic'},       link: function postLink(scope, element, attrs) {         scope.$watch( 'dynamic' , function(html){           element.html(html);           $compile(element.contents())(scope);         });       }     };   });

Answer 2

在谷歌讨论小组中找到的。为我工作。var $injector = angular.injector(['ng', 'myApp']);$injector.invoke(function($rootScope, $compile) {   $compile(element)($rootScope);});