web-dev-qa-db-ja.com

AngularJSテンプレートを介してHTMLを出力する方法は？

<h1>{{ revision.title }}</h1>

<div ng-bind-html="revision.content"></div>

タイトルは正常に出力されますが、コンテンツはそうではありません。それにはいくつかのhtmlがあり、次のエラーが表示されます：Attempting to use an unsafe value in a safe context.これはそう記述されています： http://docs.angularjs.org/error/ $ sce：unsafeで問題ありませんが、HTMLが含まれているため、どのようにコンテンツを出力できますか。したがって、{{ revision.content | safe }}またはsmthnに設定する必要があります。正しい方法は何ですか？

編集：

AngularJSバージョン：1.2

javascripthtmltemplatesangularjsview
28
Xeen

修正はこれです：

http://code.angularjs.org/ からangular-sanitize.min.jsをインクルードし、モジュールにインクルードします。

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

ng-bind-htmlを自由に使用できます

110
Xeen

古い質問ですが、コントローラーで$sceを使用して値を信頼することもできます。

$scope.revision.content = $sce.trustAsHtml($scope.revision.content);

その後、ng-bind-htmlが機能します。

4
Felix Engelmann

ng-htmlと同じ基本的なことを行うng-bind-html-unsafeディレクティブを作成しました。ただし、使用には注意が必要です。悪意のある攻撃にあなたのサイトを簡単に開く可能性があります。実装する前に、何をしているのかを知ってください。

.directive('ngHtml', ['$compile', function($compile) {
    return function(scope, elem, attrs) {
        if(attrs.ngHtml){
            elem.html(scope.$eval(attrs.ngHtml));
            $compile(elem.contents())(scope);
        }
        scope.$watch(attrs.ngHtml, function(newValue, oldValue) {
            if (newValue && newValue !== oldValue) {
                elem.html(newValue);
                $compile(elem.contents())(scope);
            }
        });
    };
}]);

そして、次のように使用します。

<div ng-html="revision.content"></div>

お役に立てば幸いです。

3
tennisgent

どのバージョンを使用していますか？ 1.2未満を使用している場合は、ngBindHtmlUnsafeを試すことができます

2
Michael B

ngBindHtmlについてのAngularJs公式ドキュメント に従って、アプリの依存関係にngSanitizeを挿入する必要があります

式を評価し、結果のHTMLを安全な方法で要素に挿入します。デフォルトでは、結果のHTMLコンテンツは$ sanitizeサービスを使用してサニタイズされます。この機能を利用するには、たとえば、モジュールの依存関係にコアのAngularではなくngSanitizeを含めることで、$ sanitizeが利用可能であることを確認してください。モジュールの依存関係でngSanitizeを使用するには、アプリケーションに「angular-sanitize.js」を含める必要があります。

その後、次の方法でngSanitizeモジュールをインストールできます。

1-bowerを使用

bower install --save angular-sanitize

2-npmを使用

npm install --save angular-sanitize

3-ダウンロードにより手動でangular-sanitize.js file from code.angularjs.orgバージョン番号別のすべてのangleJsファイルカテゴリを含むパス like @ Xeen answer

angular-sanitizeのインストール用のAngularJsの公式githubリポジトリ からngSanitizeモジュールのインストールの詳細を参照してください。

0
ahmed hamdy