Angularjs ng-bind-html-unsafe 替换

Posted 2023-02-23

【中文标题】Angularjs ng-bind-html-unsafe 替换

【英文标题】：Angularjs ng-bind-html-unsafe replacement

【发布时间】：2013-09-26 09:42:48

【问题描述】：

我以前可以使用ng-bind-html-unsafe 来输出未经清理的代码（因为清理发生在服务器端）。

但现在这个选项不见了？我知道我可以使用 $sce.trustAsHtml，但是当 unsafe 如此易于使用时，将它添加到整个地方的 javascript 是一个巨大的痛苦。

如何恢复不安全？

【参考方案1】：

又简单了。

App.filter('unsafe', ['$sce', function ($sce) 
    return function (val) 
        return $sce.trustAsHtml(val);
    ;
]);

用法：

<any ng-bind-html="content | unsafe"></any>

有关 html 绑定的更多信息，请查看文档here.

只是一个警告：确保您确实信任 html，否则您可能会在您的网站安全中打开一个漏洞。

【讨论】：

在 ng-bind-html 上工作得很好，但对我来说 not 和 <p> … </p>。

谢谢@HenrikN，你是对的。 ... 只会打印出内容的文本。我已经更新了答案。

@J-Dizzle 这非常相似。我猜他得到了他们的第一个，尽管这是一个非常常见且众所周知的模式。感谢您的通知。

如此简单。如此优雅。太美了。

【参考方案2】：

嗯，创建自己的指令很简单，这里有一个例子。

指令：

app.directive('bindHtmlUnsafe', function( $compile ) 
    return function( $scope, $element, $attrs ) 

        var compile = function( newHTML )  // Create re-useable compile function
            newHTML = $compile(newHTML)($scope); // Compile html
            $element.html('').append(newHTML); // Clear and append it
        ;

        var htmlName = $attrs.bindHtmlUnsafe; // Get the name of the variable 
                                              // Where the HTML is stored

        $scope.$watch(htmlName, function( newHTML )  // Watch for changes to 
                                                      // the HTML
            if(!newHTML) return;
            compile(newHTML);   // Compile it
        );

    ;
);

用法：

<div bind-html-unsafe="testHTML"></div>

演示：http://jsfiddle.net/cC5VZ/2

【讨论】：

谢谢！为什么要清除并附加它而不是使用.html() 设置它？

因为如果你使用html();，它会像[object HTMLHeadingElement]一样结束，我也更喜欢追加

它不适合我。附加它的AFAIK速度较慢，我将其更改为仅使用 html()

似乎有点荒谬，他们会删除有用的功能并强迫人们为此编写自己的指令。

@CorayThan 这对你来说很有棱角。

【参考方案3】：

最简单的方法，不用$sce：

module.directive('html', function() 
    function link(scope, element, attrs) 

        var update = function() 
            element.html(scope.html);
        

        attrs.$observe('html', function(value) 
            update();
        );
    

    return 
        link: link,
        scope:  
            html:   '='
        
    ;
);

使用方法：

<div html="angular.variable"></div>

【参考方案4】：

我强烈建议您查看这个 SIMPLE JSFiddle 示例。 是救生员：

http://jsfiddle.net/cC5VZ/2/

<div ng-app="ngBindHtmlExample">
  <div ng-controller="ngBindHtmlCtrl">
   <p ng-bind-html="myHTML" compile-template></p>
  </div>
</div>



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

app.controller('testApp', function( $scope ) 
    $scope.testHTML = '<h1> Welcome :) </h1>';
);

app.directive('bindHtmlUnsafe', function( $parse, $compile ) 
    return function( $scope, $element, $attrs ) 
        var compile = function( newHTML ) 
            newHTML = $compile(newHTML)($scope);
            $element.html('').append(newHTML);        
        ;

        var htmlName = $attrs.bindHtmlUnsafe;

        $scope.$watch(htmlName, function( newHTML ) 
            if(!newHTML) return;
            compile(newHTML);
        );

    ;
);