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

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

应用.js

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

控制器.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);
        });

      };
  }])

成员列表.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>

您可以使用

Angular directive进行Jquery Datatable，而不是使用其他选项。这将有利于在Angular way中添加功能。

网址： 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模块相结合。所以我相信它会解决你的问题。

首先设置

tb选项，并在成功时设置数据对象：

.controller('MembersListController', ['$scope', '$http', 'GlobalService', function ($scope, $http, GlobalService) {
    $scope.tbOptions = {
        data: [],
        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>';
               }
           }
        ]
    };
    $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.tbOptions.data = data;
            console.log(data);
        }).error(function (data, status, headers, config) {
            console.log(status);
        });
    };
    $scope.getMembersList();
}])

另外，避免ng-init。在构造函数内部初始化。因此，请从HTML中删除ng-init。

我希望你使用ngTableParams。看看这个。表参数

app.controller('MembersListController', ['$scope', '$http', 'GlobalService',function($scope,$http, GlobalService,ngTableParams) {
  data = []; 
  $scope.tableParams = new ngTableParams({
    page: 1,
    count: 10,
    sorting: {
        name: 'asc'     // initial sorting
    }
}, {
    counts: [],
    getData: function ($defer, params) {
        var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : data;
        var searchedData = searchData(orderedData);
        params.total(searchedData.length);
        $scope.events = searchedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
        if (params.total() < (params.page() - 1) * params.count())   params.page(1);
        $defer.resolve($scope.events);
    },
    $scope: { $data: {} }
});
var searchData = function (orderedData) {
    orderedData = $filter('filter')(orderedData);
    if ($scope.searchText)
        return $filter('filter')(orderedData, $scope.searchText);
    return orderedData
};
  $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){
          data = data; // This assigns the data into the array can be accessed through $data in page
          //$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);
    });

  };
  }])

成员列表.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" 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>
                  <tr ng-repeat="data in $data">
                  <td>{{data.title}}</td>
                  <td>{{data.firstName}}</td>
                  <td>{{data.lastName}}</td>
                  <td>{{data.email}}</td>
                 </tr>
                </tbody>
              </table>
            </div>
    </div>
  </div>
</div>

页面中使用的ngTableParams.js按过滤器排序完成，搜索数据的情况下搜索栏可用于搜索数据。每次都会重新加载表参数以获取数据列表。

在页面中，$data用于访问作用域中 tableParams 变量中存在的数据。 ngTableParams加载速度更快。希望这有帮助

MemberService.js

var MemberService = angular.module('MemberService', []);
MemberService.factory('MemberFactory', ['$q', '$http', function ($q, $http) {
  var memURL = 'http://localhost:3000/apiserv/members/';
  return {
    getMembers: function () {
      var deferred = $q.defer();
      $http({
        method: 'GET',
        url: memURL,
        headers: {'Content-Type': 'application/json'}
      }).success(function (data, status, headers, config) {
        console.log(data);
        deferred.resolve(data);
      }).error(function (data, status, headers, config) {
        deferred.reject(status);
      });
      return deferred.promise;
    }
  };
}]);

app.js（不要忘记将成员服务模块包含在您的应用程序依赖项中）

var app = angular.module('application', ['MembersList', 'MemberService']);
$stateProvider.state('app.allmembers', {
  url: '/members/members-list',
  templateUrl: 'tpl/members/membersList.html',
  resolve: {
    membersData: ['MemberFactory', function(MemberFactory {
      return MemberFactory.getMembers();
    }
  }
})

成员列表Ctrl.js

var MembersList = angular.module('MembersList', []);
MembersList.controller('MembersListController', ['$scope', 'GlobalService', 'membersData' function ($scope, GlobalService, membersData) {
  $scope.tbOptions = {
    data: membersData,
    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>';
        }
      }
    ]
  };
}]);

要点是：https://gist.github.com/senayar/d2e2b09fdf475088a71d

如果您仍然无法出示您的服务和控制器。

相关内容

最新更新

热门标签：