2

我正在将数据库中的内容直接加载到视图中，并且我想对其进行编译，以便执行 Angular 代码，就好像它是通过标准模板加载的一样。

我不太明白的是如何编译从数据库加载的 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 以及如何在不去除角度代码（例如 ng-click）的情况下将 HTML 放入视图中。http://plnkr.co/edit/C0ij2j2NxGZl6NaOdW8c?p=preview。看第二个使用sce.trustAsHtml(). 我如何扩展它以编译代码以便ng-click工作？

提前致谢。

4

1 回答 1

7

事实证明，如果我自己编译内容，我就不需要担心 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);
        }
    );
};
});
于 2013-09-06T21:39:30.457 回答