ng-bind-html 去除元素属性答案

【问题标题】：ng-bind-html strips elements attributesng-bind-html 去除元素属性
【发布时间】：2016-07-25 22:23:16
【问题描述】：

我正在尝试在模板中插入一个包含一些标记的字符串。

在控制器中：
$scope.message = "Hello moto <a ui-sref='home.test'>click</a>";

模板：

<div ng-bind-html="message.text"></div>

呈现为：

<div ng-bind-html="message.text" <div="" class="ng-binding">Hello moto <a>click</a></div>

尝试使用以下过滤器也无济于事；对于任何一个注释选项，文本都是简单转义的：

angular.module('test-filters', ['ngSanitize'])
    .filter('safe', function($sce) {
            return function(val) {
                return $sce.trustAsHtml(val);
                //return $sce.trustAsUrl(val);
                //return $sce.trustAsResourceUrl(val);
            };
    });

如何在不转义或剥离属性的情况下插入字符串？

编辑：Plunker http://plnkr.co/edit/H4O16KgS0mWtpGRvW1Es?p=preview（更新为引用 ngSanitize 的 sylwester 版本

【问题讨论】：

您能提供一个 Plunker 示例 (plnkr.co) 吗？
@mfirry 刚刚编辑了原帖
你能在你的模板中试试
{{message}}
@vgSefa 与<li> {{ message }} </li> 做同样的事情。不过仍然更新了 plunkr。
您是如何尝试使用过滤器的？ ng-bind-html 将尝试制作一个可以安全使用的版本，所以你必须确保你正确使用了$sce.trustAsHtml

标签： angularjs

【解决方案1】：

让我们看看这里http://jsbin.com/faxopipe/1/edit 它现在已排序。它不起作用，因为标签“ui-sref”中有另一个指令，所以你必须使用 $sce 服务。

请在你的js中添加方法：

 $scope.to_trusted = function(html_code) {
    return $sce.trustAsHtml(html_code);

并且在视图中：

<p ng-bind-html="to_trusted(message)"></p>

【讨论】：

如果我们说trustAsHtml，我们如何防止XSS？
作为过滤器（而不是作用域函数）实现也很好。
谢谢。我们可以让这更简单——$scope.to_trusted = $sce.trustAsHtml;

【解决方案2】：

在您使用 ui.router 路径的场景中，您必须将 $compile 与 $sce 结合用于您的动态 html，以便 ui- sref 工作正常。如果你不这样做，你只会看到一个实际上不起作用的链接。

例如<span> Hello moto <a ui-sref='home.test'> Link </a> </span>

//You must need to add boundary conditions, this is just for demonstration
$scope.to_trusted = function(someHTML) {
    var compiledVal = $compile(someHTML)($scope);
    var compiledHTML = compiledVal[0].outerHTML;
    return $sce.trustAsHtml(compiledHTML);
}

而你是这样使用的，

<p ng-bind-html="to_trusted(message)"></p>

请注意，您的消息必须是从"<" 开始的有效 HTML，因此如果您将非 HTML 传递给 $compile，您将收到 jqlite 错误。我用<span>处理你的案子。

【讨论】：

【解决方案3】：

您错过了对 angular-sanitize.js 的引用，并且您也将其注入 angular.app

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

绑定 html 最简单的选项是 ng-bind-html ：

<li>link ng-html-bind <div ng-bind-html="message"></div></li>

请看Plunkr

【讨论】：

啊，是的，我确实错过了 plunker 中对 angular-sanitize.js 的引用。没有一个结果最终会在保留所有属性的情况下被转义。最接近的是“link ng-bind-html”行，但它呈现为<a>click me</a>，而不是<a ui-sref="home.test"></a>，所以你没有回答我的问题。
此时非常旧的帖子，但在 plnkr 中的最后一个 <li>element 中有几个错误 - div 应为：<div ng-bind-html="message|safe">（修复了不正确的 ng-html-bind 指令，并且从表达式中删除 filter:。