Question

我试图在控制器上编译一些HTML，如下所示：

$scope.online = networkService.isOnline();

var wrapper = angular.element(document.createElement("i"));

var compiledContents = $compile($scope.chapter.contents);
var linkedContents = compiledContents($scope);

wrapper.append(linkedContents);

$scope.chapter.linkedContents = wrapper.html();

编译的HTML中有一些元素带有ng-if='online'。但编译后的HTML总是随着这些元素的评论而出现，好像online不是真的（它是 - 我甚至到了在Angular的$ compile中添加console.log(scope.online)的地步功能和它打印真实）。

我在这里遗漏了什么吗？

Answer 1

wrapper.html()返回一个表示元素内部HTML的字符串。然后，您将该字符串分配给$scope.chapter.linkedContents。虽然从您的问题中不清楚您实际使用$scope.chapter.linkedContents的方式和位置，但有一点是肯定的 - 这个字符串绝对不会以任何方式“链接”。

实际的“linkedContents”是应该在DOM中结束的元素。在您的情况下，它是wrapper元素及其内容，但同样 - 不清楚，如果有的话，它最终会在DOM中结束。

但你甚至不应该在控制器中处理DOM。控制器是DOM不可知的，所以你应该看到一个很大的警告信号表明你做错了什么。确保您了解控制器，指令等的作用......

我想我明白你要解决的问题是什么。你得到一些动态的未编译HTML（或实际元素） - 即$scope.chapter.contents，你需要将它放在DOM中并编译/链接。

通常，要绑定HTML，可以使用ng-bind-html（假设它已被信任或正在进行清理）：

<div ng-bind-html="chapter.contents">
</div>

但这不是$编译的。为了编译，我建议编写自己的指令，它类似于ng-bind-html，但也会编译它：

<div compile-html="chapter.contents">
</div>

然后，该指令将获取内容，针对某个范围（例如，子范围）编译/链接它，并将其附加到托管指令compileHtml的元素。

.directive("compileHTML", function($compile, $parse){
  return {
    scope: true,
    link: function(scope, element, attrs){
       // get the HTML content
       var html = $parse(attrs.compileHtml)(scope);

       element.empty();

       // DISCLAIMER: I'm not dealing with sanitization here, 
       // but you should keep it in mind

       $compile(html)(scope, function cloneAttachFn(prelinkContent){
          element.append(prelinkContent);
       });
    }
  };
})

$ compile链接函数显然不适用范围

1 个答案: