使用ng-bind-html 編譯AngularJS 程式碼

在AngularJS 中，ng-bind-html 指令可以動態地將HTML 內容插入到看法。但是，如果包含的內容包含 AngularJS 程式碼，則將無法正確解釋。這就是在 ng-bind-html 中編譯 AngularJS 程式碼的問題出現的地方。

為了解決這個問題，可以使用一個名為 angular-bind-html-compile 的外部指令。這是一個逐步解決方案：

第 1 步：安裝

從 GitHub 安裝 angular-bind-html-compile 指令：https://github。 com/incuna/angular-bind-html-compile

第2 步：包含在模組中

將指令加入AngularJS 模組：

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

第三步：Template 中的用法

模板中，使用bind -html-compile 指令注入所需的內容：

範例：

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

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

結果：

  Dear John,

注意： 此指令監視綁定表達式中的更改，並在必要時重新編譯內容。這允許動態解釋和執行嵌入在 API 回應中的 AngularJS 程式碼。