角度加载ui-bootstrap动态标签内容

Question

我正在使用角度ui-bootstrap标签来开发标签。 但是，如何在每次单击选项卡后动态加载选项卡式数据。

我可以加载静态内容。但我想从ajax动态加载数据。 每个标签包含不同的HTML文件。

控制器

  $scope.customerInfoTabs = 
           {  
              "General":[  
                 "General",
                 "Employment",
                 "Relationship Status",
              ],
              "Identification":[]                
           }
$scope.customerInfo = $scope.customerInfoTabs['General'];

模板

<div class="well">            
            <div class="tabbable">
              <ul class="nav nav-tabs">                               
                <li ng-class="{'active': $index == 0}" ng-repeat="infotabs in customerInfo"><a showtab="" href= data-toggle="tab" ng-click="">{{infotabs}}</a></li>              
              </ul>
              <div class="tab-content">                
                <div class="tab-pane active" id="tab1">
                  <p>I'm in Section 1.</p>
                </div>
                <div class="tab-pane" id="tab2">
                  <p>Howdy, I'm in Section 2.</p>
                </div>
                <div class="tab-pane" id="tab3">
                  <p>Howdy, I'm in Section 3.</p>
                </div>
              </div>
            </div>
        </div>    

Answer 1

如果您想为每个标签显示动态内容，则需要使用$http服务来获取html，然后使用ngBindHtml绑定它。

以下是：

<tabset>
   <tab ng-repeat="tab in tabs" heading="{{tab.title}}"  select="loadData()">
      <div ng-bind-html="tabDynamicContent"></div>
   </tab>
</tabset>

上面的示例是一个简化，其中所有选项卡都具有相同的html。另外，请确保包含ngSanitize模块。

以下是plunkr：http://plnkr.co/edit/Yege43KerzfFKE8k5OGc?p=preview

Answer 2

我认为这个问题是这个stackoverflow的回答： first link或second link

因此，您可以使用标签集来完成所需的工作。