编译通过Angularjs 1.2从数据库加载的HTML

Question

我正在将数据库中的内容直接加载到视图中,我想编译它,以便执行角度代码,就好像它是通过标准模板加载一样.

我不太明白的是我如何编译我从数据库加载的HTML.当我尝试使用$ compile时,它始终会出现indexOf问题.

Error: [$parse:lexerr] Lexer Error: Unexpected next character  at columns 1415-1415 [#] 
in expression [<p>Introducing XXX featuring Something great. Along with the already famous World <strong>Approach</strong>….

从我从其他注释中可以看到,似乎$ compile只适用于现有的DOM元素,但在我的情况下,新的SCE内容让我更加难以将html放入视图而不会删除角度代码.我能想到的唯一一件事就是每次内容发生变化时都可能以某种方式使用手表进行编译？这可以通过指令来完成吗？

这个plunker显示了SCE以及如何在不剥离角度代码的情况下将HTML放入视图中(例如ng-click).http://plnkr.co/edit/C0ij2j2NxGZl6NaOdW8c?p=preview.看看使用的第二个例子sce.trustAsHtml().我怎样才能扩展它然后编译代码以便ng-click工作？

提前致谢.

Answer 1

事实证明,如果我自己编译内容,我不需要担心SCE.因此,我使用$ compile(http://docs.angularjs.org/api/ng.$ compile)中的确切指令代替ng-bind-html 将HTML放在适当的位置并同时编译它.

要显示已编译的内容:

<div compile="content.description"></div> 代替 <div ng-bind-html="content.description"></div>

.directive('compile', function($compile) {
// directive factory creates a link function
return function(scope, element, attrs) {
    scope.$watch(
        function(scope) {
             // watch the 'compile' expression for changes
            return scope.$eval(attrs.compile);
        },
        function(value) {
            // when the 'compile' expression changes
            // assign it into the current DOM
            element.html(value);

            // compile the new DOM and link it to the current
            // scope.
            // NOTE: we only compile .childNodes so that
            // we don't get into infinite loop compiling ourselves
            $compile(element.contents())(scope);
        }
    );
};
});