AngularJS の動的 HTML 内の Angular テンプレートを解釈するにはどうすればよいですか?

Ng-bind-html での Angular テンプレート解釈の処理

課題:

AngularJS では、ng- bind-html ディレクティブを使用すると、テンプレート内に動的 HTML コンテンツを含めることができます。ただし、Angular テンプレート自体を含めようとすると、それらは解釈されず、単純に生の HTML として表示されます。

解決策:

この問題を解決するには、外部テンプレートの利用を検討してください。動的に組み込まれたコンテンツ内の Angular 式のコンパイルを可能にするディレクティブ。このようなディレクティブの 1 つは、https://github.com/incuna/angular-bind-html-compile.

Implementation:

angular-bind-html-compile ディレクティブをインストールします。
1. ディレクティブを Angular モジュールに組み込みます。
2. テンプレート内のディレクティブを利用して、必要なダイナミックをバインドしますHTML コンテンツ。

例:

必要な動的コンテンツが API 応答から派生するシナリオを考えてみましょう。

コントローラー コード:

<code class="javascript">$scope.letter = { user: { name: "John"}}</code>

JSON 応答:

<code class="json">{ "letterTemplate":[
    { content: "<span>Dear {{letter.user.name}},</span>" }
]}</code>

テンプレート コード:

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

結果:

<code class="html"><span>Dear John,</span></code>

結論:

「angular-bind-html-compile」ディレクティブを組み込むことで、開発者は動的 HTML コンテンツ内に埋め込まれた Angular 式を効果的にコンパイルでき、以前はプレーン HTML として扱われていたテンプレートの解釈が可能になります。

以上がAngularJS の動的 HTML 内の Angular テンプレートを解釈するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。