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