在 Angular UI 中将动态 HTML 显示为选项卡内容

Question

在这个 plunk 中，我有一个 Angular UI 选项卡，其中包含需要动态生成的 HTML 内容。尽管如此，选项卡内容仍显示 HTML 标记。如何解决这个问题？

.HTML

 <uib-tabset>
    <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}">
      {{tab.content}}
    </uib-tab>
 </uib-tabset>

爪哇语

var app = angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
app.controller('ctl', function ($scope) {
     $scope.tabs = [
                    { title:'title 1', content:'<div id="id1">111</div>' },
                    { title:'title 2', content:'<div id="id2">222</div>' }
                  ];
});

Answer 1

使用 <div ng-bind-html="tab.content"></div> ：

 <uib-tabset>
    <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}">
      <div ng-bind-html="tab.content"></div>
    </uib-tab>
  </uib-tabset>