AngularJS，UI引導程序的選項卡和數據表

Question

我正在使用UI Bootstrap's選項卡並在每個選項卡中插入數據表，但數據表未呈現。

如果我刪除uib-tabset和uib-tab數據表被渲染。

這裏的HTML代碼

<uib-tabset active="active" > 
    <uib-tab index="0" heading="Successful"> 
     <div class="panel"> 
      <div class="panel-body"> 
       <table id="table-messagestatus-view-successful" class="table table-hover dataTable table-striped width-full"> 
        <thead> 
         <tr> 
          <th>MessageID</th> 
          <th>Date</th> 
          <th>Message Name</th> 
          <th>Phone Number</th> 
          <th>Status</th> 
          <th>Cost</th> 
          <th>SMS Group</th> 
         </tr> 
        </thead> 
        <tfoot> 
         <tr> 
          <th>MessageID</th> 
          <th>Date</th> 
          <th>Message Name</th> 
          <th>Phone Number</th> 
          <th>Status</th> 
          <th>Cost</th> 
          <th>SMS Group</th> 
         </tr> 
        </tfoot> 
        <tbody> 

        </tbody> 
       </table> 
      </div> 
     </div> 
    </uib-tab> 
    <uib-tab index="1" heading="Unsuccessful"> 
     <div class="panel"> 
      <div class="panel-body"> 
       <table id="table-messagestatus-view-unsuccessful" class="table table-hover dataTable table-striped width-full"> 
        <thead> 
         <tr> 
          <th>MessageID</th> 
          <th>Date</th> 
          <th>Message Name</th> 
          <th>Phone Number</th> 
          <th>Status</th> 
          <th>Cost</th> 
          <th>SMS Group</th> 
         </tr> 
        </thead> 
        <tfoot> 
         <tr> 
          <th>MessageID</th> 
          <th>Date</th> 
          <th>Message Name</th> 
          <th>Phone Number</th> 
          <th>Status</th> 
          <th>Cost</th> 
          <th>SMS Group</th> 
         </tr> 
        </tfoot> 
        <tbody> 

        </tbody> 
       </table> 
      </div> 
     </div> 
    </uib-tab>   
</uib-tabset> 

...和JS

var app = angular.module('smsmanagement', ['ui.bootstrap']); 

app.controller('MessageStatusController', function ($scope, $http, $routeParams, $routeParams) { 

var messageID = $routeParams.param; 

// Refresh the table 
if ($('#table-messagestatus-view-successful').length > 0) { 
    $('#table-messagestatus-view-successful').DataTable({ 
     sDom: "<'row'<'col-sm-6'l><'col-sm-6'f>r>t<'row'<'col-sm-6'i><'col-sm-6'p>>", 
     "processing": true, 
     "serverSide": true, 
     "order": [[1, "desc"]], 
     "ajax": { 
      "url": "messagestatus/dt", 
      "data": function (d) { 
       d.messageID = messageID; 
       d.status = "successful"; 
      } 
     } 
    }); 
} 
}); 

我該怎麼辦？

Answer 1

請不要使用像上面的註釋這樣的jQuery解決方案。 ui-bootstrap不需要jQuery，只需在文檔頁面上根據需要修改示例即可。這也意味着不要在你的控制器中使用$，而只是一個會刷新表的函數。您可以使用ngRepeat指令填充表格。

像這樣

<table id="table-messagestatus-view-successful" class="table table-hover dataTable table-striped width-full"> 
      <thead> 
      <tr> 
       <th>MessageID</th> 
       <th>Date</th> 
       <th>Message Name</th> 
       <th>Phone Number</th> 
       <th>Status</th> 
       <th>Cost</th> 
       <th>SMS Group</th> 
      </tr> 
      </thead> 
      <tbody> 
      <tr ng-repeat="row in tableData2"> 
       <th>{{row.MessageID}}</th> 
       <th></th> 
       <th></th> 
       <th></th> 
       <th>{{row.Status}}</th> 
       <th></th> 
       <th></th> 
      </tr> 
      </tbody> 
     </table> 

現在一切都越來越呈現

Here is a demo plunker