コントローラーから動的 HTML フラグメントを AngularJS ビューに安全に挿入するにはどうすればよいですか?

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

AngularJS は、コントローラー ロジックに基づいてビューを動的に変更するさまざまな方法を提供します。特定のシナリオでは、コントローラー内で HTML フラグメントを動的に生成し、ビューに表示する必要が生じます。これを実現するには、挿入されたコンテンツを AngularJS がどのように解釈するかを考慮する必要があります。

AngularJS HTML レンダリングについて

モデル プロパティを HTML フラグメントに設定すると、AngularJS は自動的にエスケープします。セキュリティ上の理由から HTML エンティティを削除します。ただし、HTML を実際のコンテンツとして表示することが目的の場合、このエスケープには問題が生じます。結果の HTML は引用符で囲まれた文字列としてレンダリングされ、実行が妨げられます。

動的 HTML フラグメントをレンダリングするためのソリューション

この制限を克服するために、AngularJS は次のソリューションを提供します。

ng:bind-html (角度1.x)

HTML 内の ng:bind-html ディレクティブを利用して、目的の HTML コンテンツをレンダリングします。ただし、このアプローチでは潜在的なセキュリティ脆弱性が発生するため、$sce または ngSanitize を使用する必要があります。

$sce

コントローラーで $sce.trustAsHtml() を使用してマークを付けます。レンダリングしても安全な HTML 文字列。このメソッドを使用すると、エスケープせずにコンテンツをビューに挿入できます。

$scope.thisCanBeusedInsideNgBindHtml = $sce.trustAsHtml(someHtmlVar);

ngSanitize

angular-sanitize.min.js リソースを HTML に組み込みます。さらに、JavaScript ファイルの AngularJS モジュールに ngSanitize を含めます。

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

これらの手法を採用すると、動的に生成された HTML フラグメントをコントローラーから AngularJS ビューに効果的に挿入できます。

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