即使我使用``{{..}}`` 绑定样式，我如何使 AngularJS 始终绑定为 html答案

【问题标题】：How I make AngularJS to always bind as html even when I am using ``{{..}}`` bind style即使我使用``{{..}}`` 绑定样式，我如何使 AngularJS 始终绑定为 html
【发布时间】：2016-01-30 23:46:17
【问题描述】：

我从 2 个外部资源获取 HTML 模板和 HTML 数据。这是 HTML 模板的示例

<div>
  {{data}}
</div>

这是 HTML 数据

<b>Hello World</b>

我想将 HTML 数据编译成 HTML 模板。

我知道我可以使用 ng-bind-html，但就我而言，我无法更改从外部资源获得的模板。我希望默认绑定 {{..}} 将作为 HTML 而不是文本可能吗？

换句话说：即使我使用{{..}}绑定样式，我如何让AngularJS始终绑定为html

【问题讨论】：

你不认为这是可能的吗？但一切皆有可能......
可以做你想做的事，但不能在表达式括号中。您需要找到解决方案。
正如许多其他人所提到的，这不仅是不可能的，而且甚至有必要这样做也是值得怀疑的。通常，将 HTML 保存在 JavaScript 变量中是一种不好的做法，但用户生成的内容除外。然而，即便如此，在 99% 的情况下，用户都不应该知道应用程序的内部结构会使用这样的表达式。并且在不需要时将 HTML 保存在 JavaScript 变量中是一个很大的危险信号，表明您没有充分利用 Angular。
@Claies 用户生成的内容是许多网站的重要组成部分。以 json 格式提供 html 是很常见的做法。不知道为什么你说这是不好的做法。有什么可以引用的吗？请注意，消毒是给定的
@charlietfl 我尝试在这些陈述前加上“一般”、“大部分时间”等，尤其是当问题不清楚预期用途时。

标签： javascript angularjs

【解决方案1】：

无法使用花括号插入 HTML 进行渲染，但是可以使用 $compile 重新编译模板并使用 ng-bind-html。

基本示例：

HTML

<div ng-app="myApp" ng-controller="MainCtrl">
  <output></output>
</div>

var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope, $sce, $compile) {
  var template = '<div>{{data}}</div>';
  template = template.replace(/\{\{(\w+)\}\}/, '<span ng-bind-html="$1"></span>');

    angular.element(document.querySelector('output')).append($compile(template)($scope));
    $scope.data = $sce.trustAsHtml('<b>Hello world</b>');
});

JSFiddle 演示：https://jsfiddle.net/tjruzpmb/250/

【讨论】：

【解决方案2】：

你不能在{{}}中使用html

Angular 仅将这些大括号插入为文本。否则，清理费用会非常昂贵，并且会导致性能问题。

还有许多其他方法可以包含 html，还包括自定义指令和ng-include

【讨论】：