数据表与$ HTTP角的方式所带来的数据

Question

，所以我上AngularJS应用程序的工作，我需要使用$ HTTP服务从服务器获取数据，就像这样：

$http({ 
    method: 'GET', 
    url: $rootScope.apiURL + 'getAllClientLocations/' + session, 
    headers: {'Content-Type': 'application/x-www-form-urlencoded'} 
}).success(function (response) { 
    if (response.ErrorMessage === null && response.Result !== null) { 
     $scope.locations = Object.keys(response.Result).map(function (key) { 
      return response.Result[key] 
     }); 
    } 
}); 

而且我想使用角度数据表显示数据。数据显示得很好，我得到了数据表控件（分页，按钮，搜索框），但它们都不起作用，我得到了“表中没有数据”的图例。

这是我的HTML设置：

   <table class="table table-striped table-bordered table-hover" datatable="ng" dt-options="dtOptions"> 
        <thead> 
        <tr> 
         <th>{{ 'BRANCH' | translate }}</th> 
         <th>{{ 'NAME' | translate }}</th> 
         <th>{{ 'STATUS' | translate }}</th> 
         <th>{{ 'ACTIONS' | translate }}</th> 
        </tr> 
        </thead> 
        <tbody> 
        <tr ng-repeat="station in stations"> 
         <td>{{ station.LocationName }}</td> 
         <td>{{ station.StationName }}</td> 
         <td>{{ station.StationStatus }}</td> 
         <td> 
          <button type="button" class="btn btn-primary btn-xs" ng-click="editStation(station.CliLocationSalesStationId)" ng-stow="action.edit">Update</button> 
          <button type="button" class="btn btn-success btn-xs" ng-if="!station.HardwareFingerprint" ng-click="authorizeStation(station.CliLocationSalesStationId)" ng-stow="action.edit">Authorize</button> 
          <button type="button" class="btn btn-success btn-xs" ng-if="station.HardwareFingerprint" ng-click="deauthorizeStation(station.CliLocationSalesStationId)" ng-stow="action.edit">Deauthorize</button> 
         </td> 
        </tr> 
        </tbody> 
       </table> 

这些都是我dtOptions：

$scope.dtOptions = DTOptionsBuilder.newOptions() 
    .withPaginationType('full_numbers') 
    .withDOM('frtip') 
    .withButtons([ 
     'copy', 
     'print', 
     'excel' 
    ]); 

我知道有某种因不同步的问题，在DOM之前我得到的建来自服务器的数据。在我从服务器获得成功数据后，是否有办法告诉数据表呈现？

Answer 1

您可以使用fromFnPromise(promiseFn)如下：

//reference $q in your controller as service 
//e.x anuglar.module("app",[]).controller($q,$scope..) 


function getPromiseData() 
{ 
    var deferred = $q.defer(); 

    $http({ 
     method: 'GET', 
     url: $rootScope.apiURL + 'getAllClientLocations/' + session, 
     headers: { 'Content-Type': 'application/x-www-form-urlencoded' } 
    }).success(function (response) 
    { 
     if (response.ErrorMessage === null && response.Result !== null) 
     { 
     $scope.locations = Object.keys(response.Result).map(function (key) 
     { 
      deferred.resolve(response.Result[key]); 
     }); 
     } 
     else 
     { 
     deferred.resolve(""); 
     } 
    }); 

    return deferred.promise; 
} 



$scope.dtOptions = DTOptionsBuilder.fromFnPromise(function() 
    { 
     return getPromiseData(); 
    }) 
    .withPaginationType('full_numbers') 
    .withDOM('frtip') 
    .withButtons([ 
     'copy', 
     'print', 
     'excel' 
    ]);