☰

AngularJS コントローラーからビューに HTML を挿入する 質問する

tag-icon • tag-icon javascript angularjs escaping html-sanitizing
AngularJS コントローラーからビューに HTML を挿入する 質問する

AngularJS コントローラーでHTMLフラグメントを作成し、この HTML をビューに表示することは可能ですか?

これは、一貫性のない JSON BLOB をペアのネストされたリストに変換するという要件から生じますid: value。したがって、コントローラーでHTMLが作成され、それを表示しようとしています。

モデル プロパティを作成しましたが、 HTML を印刷するだけではビューでレンダリングできません。

アップデート

この問題は、作成された HTML を引用符で囲んだ文字列として Angular がレンダリングすることによって発生するようです。この問題を回避する方法を見つけようとします。

コントローラーの例:

var SomeController = function () {

    this.customHtml = '<ul><li>render me please</li></ul>';
}

サンプルビュー:

<div ng:bind="customHtml"></div>

与えるもの：

<div>
    "<ul><li>render me please</li></ul>"
</div>

ベストアンサー1

Angular 1.x の場合は、ng-bind-htmlHTML で以下を使用します。

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

この時点でattempting to use an unsafe value in a safe contextエラーが発生するので、サニタイズまたは$sceそれを解決するために。

$sce

$sce.trustAsHtml()コントローラーで使用してHTML 文字列を変換します。

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

サニタイズ

2 つの手順があります。

  1. angular-sanitize.min.js リソースを含めます。つまり、

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

  2. js ファイル (コントローラーまたは通常は app.js) に ngSanitize を含めます。例:

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

おすすめ記事