ng-bind-html 内で AngularJS コードをコンパイルするにはどうすればよいですか?

ng-bind-html を使用した AngularJS コードのコンパイル

AngularJS では、ng-bind-html ディレクティブにより HTML コンテンツを動的に挿入できます。ビュー。ただし、含まれるコンテンツに AngularJS コードが含まれている場合、正しく解釈されません。ここで、ng-bind-html 内で AngularJS コードをコンパイルする際の問題が発生します。

この問題を解決するには、angular-bind-html-compile という外部ディレクティブを使用できます。段階的な解決策は次のとおりです:

ステップ 1: インストール

GitHub: https://github から angular-bind-html-compile ディレクティブをインストールします。 com/incuna/angular-bind-html-compile

ステップ 2: モジュールに含める

ディレクティブを AngularJS モジュールに追加します:

angular.module("app", ["angular-bind-html-compile"])

ステップ 3: テンプレートでの使用法

テンプレートで、bind-html-compile ディレクティブを使用して目的のコンテンツを挿入します:

<div bind-html-compile="letterTemplate.content"></div>

例:

// Controller Object
$scope.letter = { user: { name: "John"}};

// JSON Response
{ "letterTemplate":[
    { content: "<span>Dear {{letter.user.name}},</span>" }
]}

結果:

<code class="html"><div bind-html-compile="letterTemplate.content">
  <span>Dear John,</span>
</div></code>

注: ディレクティブはバインドされた式の変更を監視し、再コンパイルします。必要に応じて内容を確認します。これにより、API 応答内に埋め込まれた AngularJS コードを動的に解釈して実行できるようになります。

以上がng-bind-html 内で AngularJS コードをコンパイルするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。