我在提供的模块中有一个控制器，它使用来自JSON文件或API调用的数据。 JSON文件版本GetActionItems2()工作得很好。不幸的是，我无法让GetActionItems()像其对应的功能（JSON版本）一样工作。我正在使用延期承诺和Angular DataTables。控制台没有错误，但我的表在页面中没有数据。
我该如何解决这个问题？
调节器
angular.module('Action').controller('ActionController', ['$http', '$resource', '$scope', '$state', '$timeout', '$q', 'DTOptionsBuilder', function($http, $resource, $scope, $state, $timeout, $q, DTOptionsBuilder){
$scope.actionitems = {};
function GetActionItems2()
{
return $resource('actionitems.json').query().$promise;
}
function GetActionItems() {
var defer = $q.defer();
$http.get('api/actionitems')
.then(function(response){
defer.resolve(response);
});
return defer.promise;
}
$scope.init = function(){
var vm = this;
vm.dtOptions = DTOptionsBuilder.fromFnPromise(function() {
var defer = $q.defer();
GetActionItems().then(function(result) {
$scope.actionitems = result;
defer.resolve(result);
});
return defer.promise;
})
.withPaginationType('full_numbers')
//.withOption('drawCallback', reload)
.withDisplayLength(10)
//.withOption('order', [1, 'desc'])
.withOption('scrollY', 500)
.withOption('scrollX', '100%')
.withDOM('lftrpi')
.withScroller();
}
}]);
模板
<div ng-init="init()" ng-controller="ActionController">
ActionItems
<table id="actionitems" class="row-border hover action" datatable="" dt-options="dtOptions">
<thead>
<tr>
<th>
ID
</th>
<th>
Action Item Title
</th>
<th>
Criticality
</th>
<th>
Assignor
</th>
<th>
Owner
</th>
<th>
Alt Owner
</th>
<th>
Approver
</th>
<th>
Assigned Date
</th>
<th>
DueDate
</th>
<th>
ECD
</th>
<th>
Completion Date
</th>
<th>
Closed Date
</th>
<th>
Team
</th>
<th>
Meeting
</th>
<th>
Phase
</th>
<th>
Source
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="actionitem in actionitems">
<td>{{actionitem.ActionItemID}}</td>
<td>{{actionitem.Title}}</td>
<td>{{actionitem.Criticality}}</td>
<td>{{actionitem.Assignor}}</td>
<td>{{actionitem.Owner}}</td>
<td>{{actionitem.AltOwner}}</td>
<td>{{actionitem.Approver}}</td>
<td>{{actionitem.AssignedDate}}</td>
<td>{{actionitem.DueDate}}</td>
<td>{{actionitem.ECD}}</td>
<td>{{actionitem.CompletionDate}}</td>
<td>{{actionitem.ClosedDate}}</td>
</tbody>
</table>
</div>
将$http.get('api/actionitems').then(function(result)返回fromFnPromise并在return result.data内嵌入function(result)解决了这个问题并避免使用延迟的反模式。
$scope.init = function() {
var vm = this;
vm.dtOptions = DTOptionsBuilder.fromFnPromise(function() {
return $http.get('api/actionitems').then(function(result) {
$.each(result.data, function(key, actionitem) {
result.data[key] = [
actionitem.actionitemid,
actionitem.actionitemtitle,
actionitem.criticality,
actionitem.assignor,
actionitem.owner,
actionitem.altowner,
actionitem.approver,
actionitem.assigneddate,
actionitem.duedate,
actionitem.ecd,
actionitem.completiondate,
actionitem.closeddate
];
});
$scope.actionitems = result.data;
return result.data;
});
})
.withPaginationType('full_numbers')
//.withOption('drawCallback', reload)
.withDisplayLength(10)
//.withOption('order', [1, 'desc'])
.withOption('scrollY', 500)
.withOption('scrollX', '100%')
.withDOM('lftrpi')
.withScroller();
}
如果此异步处理来自第三方，则可能需要手动触发该控制器的数据更新。
// ...
$scope.init = function(){
var vm = this;
vm.dtOptions = DTOptionsBuilder.fromFnPromise(function() {
var defer = $q.defer();
GetActionItems().then(function(result) {
$scope.actionitems = result;
// here trigger a data update
$scope.$digest();
defer.resolve(result);
});
return defer.promise;
})
// ...
$digest方法是手动触发控制器的变化检测。
请看下面的编辑
我的初始解决方案是将数据导入表格的两步过程。
我引入了一个自定义的apply函数，然后是一个getRes函数，然后用各个actionitems填充一系列actionitems，只有一个值数组被发送到数据表并且与一个$scope.acionitems对齐。否则，我会从数据表中收到关于每个项目格式为JSON格式和相应键的警报。
angular.module('Action').controller('ActionController', ['$http', '$resource', '$scope', '$state', '$timeout', '$q', 'DTOptionsBuilder', function($http, $resource, $scope, $state, $timeout, $q, DTOptionsBuilder){
$scope.actionitems = {};
function GetActionItems2()
{
return $resource('actionitems.json').query().$promise;
}
function GetActionItems() {
var defer = $q.defer();
$http.get('api/actionitems')
.then(function(response){
defer.resolve(response);
});
return defer.promise;
}
var getRes = function(res){
$.each(res, function(key, actionitem){
res[key] = [
actionitem.actionitemid,
actionitem.actionitemtitle,
actionitem.criticality,
actionitem.assignor,
actionitem.owner,
actionitem.altowner,
actionitem.approver,
actionitem.assigneddate,
actionitem.duedate,
actionitem.ecd,
actionitem.completiondate,
actionitem.closeddate
];
});
$scope.actionitems = res;
}
function apply(scope, fn, res) {
(scope.$$phase || scope.$root.$$phase) ?
fn(res) :
scope.$apply(fn(res));
}
$scope.init = function(){
var vm = this;
vm.dtOptions = DTOptionsBuilder.fromFnPromise(function() {
var defer = $q.defer();
GetActionItems().then(function(result){
apply($scope, getRes, result.data);
defer.resolve(result.data);
});
return defer.promise;
})
.withPaginationType('full_numbers')
//.withOption('drawCallback', reload)
.withDisplayLength(10)
//.withOption('order', [1, 'desc'])
.withOption('scrollY', 500)
.withOption('scrollX', '100%')
.withDOM('lftrpi')
.withScroller();
}
}]);
编辑
我简化了代码并对结果而不是对象本身的实际数据属性使用了解决方案，该属性在我的表中生成了数据。
基于我的反模式使用的以下修改是迄今为止我能达到的最佳结果。
angular.module('Action').controller('ActionController', ['$http', '$resource', '$scope', '$state', '$timeout', '$q', 'DTOptionsBuilder', function($http, $resource, $scope, $state, $timeout, $q, DTOptionsBuilder){
$scope.actionitems = {};
function GetActionItems2()
{
return $resource('actionitems.json').query().$promise;
}
function GetActionItems() {
var defer = $q.defer();
var res = $http.get('api/actionitems').then(function(result){
var data = result.data;
$.each(data, function(key, actionitem){
data[key] = [
actionitem.actionitemid,
actionitem.actionitemtitle,
actionitem.criticality,
actionitem.assignor,
actionitem.owner,
actionitem.altowner,
actionitem.approver,
actionitem.assigneddate,
actionitem.duedate,
actionitem.ecd,
actionitem.completiondate,
actionitem.closeddate
];
});
$scope.actionitems = data;
defer.resolve(data);
});
return defer.promise;
}
$scope.init = function(){
var vm = this;
vm.dtOptions = DTOptionsBuilder
.fromFnPromise(GetActionItems)
.withPaginationType('full_numbers')
//.withOption('drawCallback', reload)
.withDisplayLength(10)
//.withOption('order', [1, 'desc'])
.withOption('scrollY', 500)
.withOption('scrollX', '100%')
.withDOM('lftrpi')
.withScroller();
}
}]);