使用自定义样式绑定 HTML 字符串答案

【问题标题】：Bind HTML string with custom style使用自定义样式绑定 HTML 字符串
【发布时间】：2014-02-01 20:58:49
【问题描述】：

我想将具有自定义样式的 HTML 字符串绑定到 DOM。但是ngSanitize 会从字符串中删除样式。

例如：

在控制器中：

$scope.htmlString = "<span style='color: #89a000'>123</span>!";

在 DOM 中：

<div data-ng-bind-html="htmlString"></div>

将省略样式属性。结果将如下所示：

<div data-ng-bind-html="htmlString"><span>123</span>!</div>

代替：

<div data-ng-bind-html="htmlString"><span style='color: #89a000'>123</span>!</div>

问题：我怎样才能做到这一点？

【问题讨论】：

标签： angularjs

【解决方案1】：

正如已经提到的@Beyers，你必须使用$sce.trustAsHtml()，直接在DOM中使用它，你可以这样做，JS/控制器部分：

$scope.trustAsHtml = function(string) {
    return $sce.trustAsHtml(string);
};

在 DOM/HTML 部分

<div data-ng-bind-html="trustAsHtml(htmlString)"></div>

【讨论】：

我用 AngularJS 1.3.15 版尝试了你的代码，但它没有工作:(
我在这篇文章中找到了 Chris 的答案，而且效果很好。 :) stackoverflow.com/questions/18340872/…
小心，如果用户可以使用输入'string'，不要使用这个，否则你有一个XSS
这个变种不错

【解决方案2】：

自定义角度滤镜呢？这适用于 1.3.20

angular.module('app.filters')
    .filter('trusted', function($sce){
        return function(html){
            return $sce.trustAsHtml(html)
        }
     })

像<div ng-bind-html="model.content | trusted"></div>一样使用它

【讨论】：

这是更好的解决方案
您，先生，为我节省了很多时间。谢谢！

【解决方案3】：

如果您信任 html，那么您可以使用 $sce.trustAsHtml 来明确信任 html。快速示例：

在控制器中（记得将 $sce 注入到你的控制器中）：

$scope.htmlString = $sce.trustAsHtml("<span style='color: #89a000'>123</span>!");

在 DOM 中，和你的一样：

<div data-ng-bind-html="htmlString"></div>

【讨论】：

就没有别的办法了吗？最好来自 DOM 本身。在我的情况下，这个结果并不干净。
除了完全禁用 $sce docs.angularjs.org/api/…（不推荐）之外，据我所知，DOM 本身并没有内置的方法来处理这个问题。很确定您应该能够编写自己的自定义指令来完成这项工作。

【解决方案4】：

您应该创建自己的自定义指令，该指令将 html 作为template 或使用templateUrl 引用它。在 html 中，您可以使用 ng-style 添加一个对象作为您的样式。

这是一个例子：http://jsfiddle.net/tomepejo/5AsQE/

【讨论】：

【解决方案5】：

您可以使用textAngular，因为 ngSanitize 白名单不灵活（有关详细信息，请参阅此问题：https://github.com/angular/angular.js/issues/5900）

【讨论】：

虽然这在理论上可以回答问题，it would be preferable 在这里包含答案的基本部分，并提供链接以供参考。