AngularJS，UI Bootstrap的选项卡和数据表

Question

我正在使用UI Bootstrap的选项卡并在每个选项卡中插入数据表，但数据表未被渲染。

如果我删除了uib-tabset和uib-tab ， 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，只需修改doc页面上的示例即可。 这也意味着不要在你的控制器中使用$ ，而只是一个刷新表的函数。 您可以使用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>

现在一切都在渲染

这是一个演示插件