在我的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 ],
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>
答案 0 :(得分：3)
您可以将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模块相结合。所以我相信它会解决你的问题。
答案 1 :(得分：0)
首先设置tbOptions，并在成功时设置数据对象：
.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。
答案 2 :(得分：0)
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（不要忘记将MemberService模块包含在您的app依赖项中）
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();
}
}
})
memberListCtrl.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
如果您仍然无法展示您的服务和控制器。
答案 3 :(得分：0)
我更希望你使用ngTableParams。看看这个。 Table Params
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);
});
};
}])
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" 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>
.js页面中使用的ngTableParams是按过滤顺序完成的，搜索条可用于搜索数据时搜索数据。每次都会重新加载tableParams以获取数据列表。
在页面中，$ data用于访问范围中tableParams变量中的数据。 ngTableParams加载速度更快。 希望这有帮助