Question

In this 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>

的Javascript

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>

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

1 个答案: