Angularjs 延迟数据表刷新直到 $http 调用返回

Question

在我的 AngularJS 应用程序中，我有一个带有 JQuery datatable 的 View ， Controller 来管理数据表中加载的数据，如下所示。刷新 View 时，数据加载到数据表中没有问题，但如果我将路由更改为另一个 View ，然后返回到带有数据表的 View ，我会收到消息(表中没有可用数据)...在跟踪我发现的问题后发生这种情况是因为数据表是在 $http 调用返回之前加载的。我尝试在包含数据表的 div 上添加 naif 以防止显示它，除非有数据返回，但没有运气，因为它仅在我第一次加载页面(通过刷新)时起作用，但在路由更改时不起作用。有人可以告诉我我到底做错了什么以及如何解决这个问题吗？谢谢

app.js

 $stateProvider.state('app.allmembers', {
            url: '/members/members-list',
            templateUrl: 'tpl/members/membersList.html'
 })

Controller .js

 .controller('MembersListController', ['$scope', '$http', 'GlobalService', function($scope, $http, GlobalService) {

      $scope.dset = []; 

      $scope.getMembersList = function() {

        var memURL = 'http://localhost:3000/apiserv/members/';

        $http({ method:'GET',
                url: memURL,
                headers: { 'Content-Type' : 'application/json'
                }                  
             })
        .success(function(data,status,headers,config){
              $scope.dset = data;

              $scope.tbOptions = {
                                  data: $scope.dset,
                                  aoColumns: [
                                    { mData: 'title' },
                                    { mData: 'firstName' },
                                    { mData: 'lastName' },
                                    { mData: 'email' }                          
                                  ],
                                  aoColumnDefs: [  
                                     {
                                       aTargets: [ 3 ],
                                       mRender: function ( data, type, full ) {
                                         return '<a href="mailto:' + data + '" style=color:red;>' + data + '</a>';
                                       }                               
                                     },
                                     {
                                       aTargets: [ 1 ],
                                       mRender: function ( data, type, full ) {
                                         return '<a href="#/app/members/update-member/' + full._id + '" style=color:blue;>' + data + '</a>';
                                       }                               
                                     }
                                  ]                      
              };

              console.log(data);
            }
        }).error(function(data,status,headers,config){
            console.log(status);
        });



      };

  }]) 

membersList.html

<div class="wrapper-md" ng-controller="MembersListController" ng-init="getMembersList()">
  <div class="row">
    <div class="col-sm-10">
      <div class="panel panel-default">
        <div class="panel-body">
                <div class="table-responsive">
                  <table ui-jq="dataTable" ui-options="tbOptions" class="table table-striped m-b-none">
                    <thead>
                      <tr>
                        <th  style="width:15%">Title</th>
                        <th  style="width:30%">First Name</th>
                        <th  style="width:30%">Last Name</th>
                        <th  style="width:25%">Email</th>
                      </tr>
                    </thead>
                    <tbody>
                    </tbody>
                  </table>
                </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

您可以对 Jquery Datatable 使用 Angular 指令，而不是使用其他选项。这对于以 Angular 方式 添加功能很有帮助。

网址:http://l-lin.github.io/angular-datatables/

请检查以下示例，它将帮助您完成任务。

网址:http://l-lin.github.io/angular-datatables/#/withAjax

另外，请检查以下 API 是否与您的配置相匹配

网址:http://l-lin.github.io/angular-datatables/#/api

工作演示: http://plnkr.co/edit/fxkaowyvkyIgRNAgcClI?p=preview

注意:以上演示结合了ui-router模块。所以我相信它会解决您的问题。