AngularJS ビューで HTML フラグメントを安全にレンダリングするにはどうすればよいですか?

AngularJS コントローラーからビューへの HTML フラグメントの挿入

AngularJS では、コントローラーで HTML フラグメントを作成し、それらをビューにレンダリングすることができます。これは、リストやその他の複雑な UI 要素を動的に生成する場合に役立ちます。

これを実現するには、まず HTML フラグメントを保持するモデル プロパティを作成します。以下の例では、「customHtml」プロパティを作成します:

var SomeController = function () {
    this.customHtml = '<ul><li>render me please</li></ul>';
}

次に、ビューで ng-bind-html ディレクティブを使用して、customHtml プロパティを要素にバインドします:

<div ng-bind-html="customHtml"></div>

ただし、AngularJS は、HTML をサニタイズ目的では安全ではないものとして扱うため、HTML を引用符で囲まれた文字列としてレンダリングします。これを解決するには、$sce サービスを使用するか、ngSanitize モジュールを含めることができます。

$sce の使用

まず、$sce サービスをコントローラーに挿入します。

app.controller('SomeController', function($sce) {
    // ...
});

次に、$sce.trustAsHtml() メソッドを使用して、 HTML 文字列を安全な形式に変換します:

this.customHtml = $sce.trustAsHtml(someHtmlVar);

ngSanitize の使用

ngSanitize を使用するには、まず angular-sanitize.min.js スクリプトを含めます:

<script src="lib/angular/angular-sanitize.min.js"></script>

次に、ngSanitize を依存関係としてAngularJS モジュール:

angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngSanitize'])

ngSanitize を使用すると、HTML 文字列をモデル プロパティに直接割り当てることができます:

this.customHtml = someHtmlVar;

どちらのメソッドでも、ビュー内で HTML フラグメントを動的に生成してレンダリングできます。により、AngularJS アプリケーションの柔軟性が向上します。

以上がAngularJS ビューで HTML フラグメントを安全にレンダリングするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。