javascript - AngularJS、UI Bootstrap 的选项卡和数据表

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，只需根据您的需要修改文档页面上的示例即可。这也意味着不要在 Controller 中使用 $ ，而只是使用刷新表的函数。您可以使用 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