AngularJS, вкладки Bootstrap UI и таблицы данных

Question

Я использую вкладки Bootstrap пользовательского интерфейса и вставляю Datatables в каждую вкладку, но Datatable не отображается.

Если я удалю uib-tabset а также uib-tab DataTable получает визуализацию.

Вот 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>

Теперь все становится

Вот демо плункер