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

前端之家收集整理的这篇文章主要介绍了Angularjs将数据表从刷新延迟到$http调用返回前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在我的AngularJS应用程序中,我有一个带有 JQuery datatable控制器的视图,用于管理数据表中加载的数据,如下所示.刷新视图时,数据在数据表中加载没有问题,但如果我将路由更改为另一个视图,则返回到带有数据表的视图我收到消息(表中没有可用数据)…在跟踪问题后我发现发生这种情况是因为在$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 ],full ) {
                                         return '<a href="#/app/members/update-member/' + full._id + '" style=color:blue;>' + data + '</a>';
                                       }                               
                                     }
                                  ]                      
              };

              console.log(data);
            }
        }).error(function(data,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>
您可以对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模块.所以我相信它会解决你的问题.

猜你在找的Angularjs相关文章