Javascript 从返回HTML的绑定值处理Angularjs指令

我甚至不确定标题是否正确。我现在所做的有点让我不知所措，因为我对棱角分明的事物还相当陌生

我试图运行一个来自绑定值的指令。该指令返回HTML。我的问题是试图让HTML显示出来。我想我错过了transclude的概念，因为我没有使用它，我完全搞砸了

下面是一个例子：

我的范围内有如下数据：

$scope.data = [{
        details: 'IUt euismod tellus, at posuere sem. <code lang="java">int foo = 21;</code> Nullam mattis ac elit in gravida.'
      }, 
      {
        details: 'BHA BHA BHA e sem. <code lang="java">int wutWut = 56;</code> Nullam mattis ac elit in gravida. Sed nec ipsum sed urna.'
      }
    ];

<pre ng-repeat="item in data">
  {{item.details}}
</pre>

它基本上只是将位传递给codeHighlight过滤器。我将其传递给过滤器的原因是，在我的应用程序中还有一个点，高亮显示方法在没有标记的情况下完成，因此对于我正在做的事情，它可以很好地工作—代码重复最少。我想我应该使用transclude选项和$filter服务，但我不确定如何获得标签之间的值

<pre ng-repeat="item in data" compile="item.details"></pre>

这是我的codeHighlight过滤器。这将使用日光库进行高亮显示。因此它以字符串的形式返回HTML。当我直接使用它时，我通常会这样做：ng bind html=foo.bar | code highlight | safeHtml

除了原始数据，所有这些都可以工作。细节永远不会被处理，因为Angular不处理正确的单词？我知道，由于明显的原因，将值吐到屏幕上不是一个过程

因此，我修改了输出并创建了一个指令来重新编译输出值。我之所以使用compile属性，是因为我不知道如何正确地提取链接？标记之间的数据

<pre ng-repeat="item in data" compile="item.details"></pre>

所以现在一切都好了！！！尼托！但我的html显示为字符串，因为角度清理输出。不幸的是，我知道如何将原始HTML打印到页面的唯一方法是使用ng bind HTML指令，但我不能这样做，因为我使用的是愚蠢的编译指令

我想也许在watch函数中，我可以在$compile函数之后附加element.htmlelement.html，但这只是返回原始模板

显然，我正在步入一个我并不完全理解的领域

我的梦想是像第一个示例中那样进行预标记设置：

<pre ng-repeat="item in data" compile="item.details">
  {{item.details}}
</pre>

看起来有点合适，但我恳求你不要选择。如果有人能帮我一点忙，我将不胜感激。我完全被卡住了，我甚至不知道该用谷歌搜索什么。

哇，你真的错过了这里。 导入$sce依赖项，它表示严格的上下文转义。这意味着您可以告诉Angular.js回显HTML，而不是对其进行清理。 例如，$scope.bacon=$sce.trustAs'html'，'bacon！'，那会导致培根

哇，你真的错过这里了。 导入$sce依赖项，它表示严格的上下文转义。这意味着您可以告诉Angular.js回显HTML，而不是对其进行清理。

---

例如，$scope.bacon=$sce.trustAs'html'，'bacon！'，那会导致培根

这段代码太棒了，只需禁用SCE即可处理字符串

angular.module('moduleName').config(function($sceProvider) {
    $sceProvider.enabled(false);
})

---

这段代码棒极了，您所需要的只是为要处理的字符串禁用SCE

angular.module('moduleName').config(function($sceProvider) {
    $sceProvider.enabled(false);
})

您尝试过element.replaceWith吗？您尝试过element.replaceWith吗？

<pre ng-repeat="item in data" compile="item.details">
  {{item.details}}
</pre>

angular.module('moduleName').config(function($sceProvider) {
    $sceProvider.enabled(false);
})