在我的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模块.所以我相信它会解决你的问题.