Question

我曾经能够使用ng-bind-html-unsafe输出未经过清理的代码（因为服务器端会进行清理）。

但现在这个选择已经消失了？我知道我可以使用$sce.trustAsHtml但是当不安全易于使用时，将它添加到整个地方的JavaScript是一个巨大的痛苦。

我如何得到不安全的回复？

Answer 1

再简单一点。

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

用法：

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

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

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

Answer 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

Answer 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>

Answer 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);
        });

    };
});

Angularjs ng-bind-html-unsafe replacement

4 个答案: