ng-bind-html-unsafeを削除して、HTMLを挿入するにはどうすればよいですか？

私が使用しようとしている$sanitizeプロバイダとng-bind-htm-unsafeDIVの中に注入HTMLへの私のコントローラを許可するように指示を。

しかし、私はそれを機能させることができません。

<div ng-bind-html-unsafe="{{preview_data.preview.embed.html}}"></div>

AngularJSから削除されたからだとわかりました（ありがとう）。

しかし、なしでng-bind-html-unsafe、私はこのエラーを受け取ります：

http://errors.angularjs.org/undefined/$sce/unsafe

1. sanitize.jsがロードされていることを確認する必要があります。たとえば、https：//ajax.googleapis.com/ajax/libs/angularjs/ [LAST_VERSION] /angular-sanitize.min.jsからロードします。
2. あなたngSanitizeはあなたのapp eg にモジュールを含める必要があります：var app = angular.module('myApp', ['ngSanitize']);
3. ng-bind-html元のhtmlコンテンツにバインドする必要があるだけです。コントローラで他に何もする必要はありません。解析と変換はngBindHtmlディレクティブによって自動的に行われます。（How does it workこれに関するセクションを読んでください：$ sce）。だから、あなたのケースで<div ng-bind-html="preview_data.preview.embed.html"></div>は仕事をします。

Alexによって提案されているように、スコープ内で関数を宣言する代わりに、単純なフィルターに変換できます。

angular.module('myApp')
    .filter('to_trusted', ['$sce', function($sce){
        return function(text) {
            return $sce.trustAsHtml(text);
        };
    }]);

その後、次のように使用できます。

<div ng-bind-html="preview_data.preview.embed.html | to_trusted"></div>

そしてここに実際の例があります：http : //jsfiddle.net/leeroy/6j4Lg/1/

Angular 1.2.0を使用しているとのことですが、他のコメントの1つとしてng-bind-html-unsafe非推奨になりました。

代わりに、次のようなことをしたいと思うでしょう：

<div ng-bind-html="preview_data.preview.embed.htmlSafe"></div>

コントローラで、$sceサービスを注入し、HTMLを「信頼できる」としてマークします。

myApp.controller('myCtrl', ['$scope', '$sce', function($scope, $sce) {
  // ...
  $scope.preview_data.preview.embed.htmlSafe = 
     $sce.trustAsHtml(preview_data.preview.embed.html);
}

1.2.0-rc3以降を使用する必要があることに注意してください。（彼らはrc3のバグを修正し、「ウォッチャー」が信頼できるHTMLで適切に動作するのを妨げていました。）

私にとって、最も単純で最も柔軟なソリューションは次のとおりです。

<div ng-bind-html="to_trusted(preview_data.preview.embed.html)"></div>

そして、コントローラに関数を追加します。

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

$sceコントローラの初期化に追加することを忘れないでください。

私の意見ではこれに対する最良の解決策はこれです：

1. たとえばcommon.module.jsファイルに含めることができるカスタムフィルターを作成します-アプリ全体で使用します。

   var app = angular.module('common.module', []);
   
   // html filter (render text as html)
   app.filter('html', ['$sce', function ($sce) { 
       return function (text) {
           return $sce.trustAsHtml(text);
       };    
   }])

2. 使用法：

   <span ng-bind-html="yourDataValue | html"></span>

さて、なぜディレクティブng-bind-htmlがtrustAsHtmlその機能の一部として含まれていないのかわかりません-私には、それがそうではないというのは少しふさわしいようです

とにかく-それが私のやり方です-67％の確率で、いつでも機能します。

もちろん、安全でない独自のHTMLバインディングを作成することもできますが、ユーザー入力を使用する場合は、セキュリティリスクになる可能性があります。

App.directive('simpleHtml', function() {
  return function(scope, element, attr) {
    scope.$watch(attr.simpleHtml, function (value) {
      element.html(scope.$eval(attr.simpleHtml));
    })
  };
})

ng-bind-html-unsafe内で{{}}を使用する必要はありません。

<div ng-bind-html-unsafe="preview_data.preview.embed.html"></div>

次に例を示します。http：//plnkr.co/edit/R7JmGIo4xcJoBc1v4iki？p = preview

{{}}演算子は基本的にng-bindの省略形にすぎないため、試みていたものはバインディング内のバインディングに相当し、機能しません。

同様の問題がありました。それでも、githubでホストされているマークダウンファイルからコンテンツを取得できませんでした。

app.jsの$ sceDelegateProviderに（githubドメインが追加された）ホワイトリストを設定した後、それは魅力のように機能しました。

説明：別のURLからコンテンツをロードする場合、信頼できるものとしてラップするのではなく、ホワイトリストを使用します。

ドキュメント： $ sceDelegateProviderとngInclude（外部HTMLフラグメントの取得、コンパイル、インクルード用）

厳格なコンテキストエスケープを完全に無効にして、を使用してHTMLを挿入できるようにすることができますng-html-bind。これは安全ではないオプションですが、テスト時には役立ちます。

上$sceのAngularJSドキュメントの例：

angular.module('myAppWithSceDisabledmyApp', []).config(function($sceProvider) {
  // Completely disable SCE.  For demonstration purposes only!
  // Do not use in new projects.
  $sceProvider.enabled(false);
});

上記の設定セクションをアプリに添付すると、htmlをng-html-bindに挿入できますが、ドキュメントのとおりです。

SCEを使用すると、コーディングのオーバーヘッドがほとんどなく、多くのセキュリティ上の利点が得られます。SCEが無効になっているアプリケーションを取得して自分で保護するか、後の段階でSCEを有効にするのははるかに困難です。SCEが導入される前に書かれた既存のコードがたくさんあり、それらを一度にモジュールに移行する場合は、SCEを無効にすることは理にかなっています。

このようなフィルターを使用できます

angular.module('app').filter('trustAs', ['$sce', 
    function($sce) {
        return function (input, type) {
            if (typeof input === "string") {
                return $sce.trustAs(type || 'html', input);
            }
            console.log("trustAs filter. Error. input isn't a string");
            return "";
        };
    }
]);

使用法

<div ng-bind-html="myData | trustAs"></div>

他のリソースタイプ、たとえばiframeのソースリンクやここで宣言された他のタイプに使用できます