如何在 AngularJS 中解釋動態 HTML 中的 Angular 模板？

在NG-bind-html 中處理Angular 模板解釋

挑戰：

在AngularJS 中，ng- bind -html 指令允許在範本中包含動態HTML 內容。然而，當嘗試包含角度模板本身時，它們仍然未被解釋，只是顯示為原始 HTML。

解決方案：

要解決此問題，請考慮使用外部允許在動態包含的內容中編譯 Angular 表達式的指令。其中一個指令是「angular-bind-html-compile」指令，位於 https://github.com/incuna/angular-bind-html-compile。

實作：

1. 安裝 angular-bind-html-compile 指令。
2. 將此指令合併到 Angular 模組。
3. 利用範本中的指令來綁定所需的動態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中文網其他相關文章！