javascript - Angularjs ng-bind-html-unsafe の置き換え

Question

以前はサニタイズされていないコードを出力するために使用できましたng-bind-html-unsafe(サニタイズはサーバー側で行われるため)。

しかし、今ではそのオプションはなくなりましたか？使用できることはわかっています$sce.trustAsHtmlが、それを JavaScript のいたるところに追加するのは、unsafe が非常に使いやすかったときに非常に苦痛です。

安全でない状態に戻すにはどうすればよいですか?

Answer 1

もう一度簡単に。

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

使用法：

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

HTMLバインディングの詳細については、こちらのドキュメントを確認してください。

警告: 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>