ng-bind-html を使用してネストされた Angular テンプレートを動的にコンパイルするにはどうすればよいですか?

AngularJS: ng-bind-html を使用したネストされた Angular テンプレートのコンパイル

問題:

ng-bind-html を使用して Angular テンプレートを動的に組み込むと、テンプレートは解釈されて実行されるのではなく、プレーン HTML として表示されます。

解決策:

Angular をコンパイルするにはng-bind-html 内のテンプレートでは、サードパーティのディレクティブ「angular-bind-html-compile」を利用します。

実装:

ステップ 1: 以下を使用してディレクティブをインストールします:

npm install angular-bind-html-compile

ステップ 2: ディレクティブを Angular モジュールに追加します:

<code class="javascript">angular.module("app", ["angular-bind-html-compile"])</code>

ステップ 3: テンプレート内で、HTML を動的に含める要素で binding-html-compile ディレクティブを使用します。

<code class="html"><div bind-html-compile="myDynamicHtml"></div></code>

例:

コントローラー:

<code class="javascript">$scope.myDynamicHtml = "<div ng-controller="myController"><span>Hello {{ myName }}</span></div>";</code>

テンプレート内:

<code class="html"><div bind-html-compile="myDynamicHtml"></div></code>

メモ:

• ディレクティブは値の変更を監視します
• このソリューションにより、テンプレートの内容や複雑さに関係なく、ng-bind-html 内で Angular テンプレートを動的にレンダリングできます。

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