1. ホーム
  2. javascript

[解決済み] AngularJSのコントローラからビューにHTMLを挿入する

2022-03-18 03:42:56

質問

を作成することは可能ですか? HTML フラグメントを作成し、このHTMLをビューに表示させることができますか?

これは、一貫性のないJSON blobを、ネストされた id: value のペアを作成します。そのため HTML がコントローラ内に作成され、それを表示させたいと考えているところです。

モデルプロパティを作成しましたが、これをビューでレンダリングする際に HTML .


更新情報

どうやら、angularが作成したHTMLを引用符で囲んだ文字列としてレンダリングしていることが問題の原因のようです。これを回避する方法を探します。

コントローラの例 :

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>

解決方法は?

Angular 1.xの場合 ng-bind-html をHTML内に記述してください。

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

この時点で、あなたは attempting to use an unsafe value in a safe context エラーになるので ngSanitize または $sce で解決します。

$sce

使用方法 $sce.trustAsHtml() をコントローラで実行し、html 文字列を変換します。

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

ngSanitize

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'])