javascript - AngularJS / Promises / DataTables - 表中没有数据

Question

我在提供的模块中有一个控制器，它使用来自 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>

标签： javascriptangularjspromiseangular-datatables

Answer 1

返回$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();
}