如何在數據通過AJAX在AngularJS中加載後重新初始化數據表？

Question

我正在使用AngularJS和Datatables以及服務器端腳本通過AJAX獲取數據。

我的控制器看起來像：

var currentJobId = $stateParams.jobId; 
var selectedJobId = $rootScope.currentJob; 

if (currentJobId !== selectedJobId) { 
    $rootScope.currentJob=$stateParams.jobId; 
    var data = { 
     id: $stateParams.jobId 
    } 
    $http.post('http://localhost/angular/scripts/getJob.php', data).success(function (thedata) { 
     $scope.job = thedata.information; 
     $scope.jobNotes = thedata.notes; 
     $scope.jobMaterialUsage = thedata.materialUsage; 
     $scope.jobItems = thedata.jobItems; 
     $scope.jobSubcontractorCosts = thedata.subcontractorCosts; 
     $scope.jobBondMiscCosts = thedata.bondMiscCosts; 
     $scope.jobEmployeeTime = thedata.employeeTime; 
    }); 
} 

一個例子表如下所示：

<table class="table table-striped table-hover row-links" id="employeeTimeTable" ui-jq="dataTable" ui-options="tableOptions"> 
    <thead> 
     <tr> 
      <th>Employee Name</th> 
      <th>Total Hours</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="time in jobEmployeeTime" ng-click="goToEmployee(job.id,time.id);"> 
      <td>{{time.name}}</td> 
      <td>{{time.total_minutes}}</td> 
     </tr> 
    </tbody> 
    <tfoot> 
     <tr> 
      <th>Employee Name</th> 
      <th>Total Hours</th> 
     </tr> 
    </tfoot> 
</table> 

所以它基本上是看是否作業ID發生了變化，如果有變化，就使得AJAX要求新的工作信息 - 如果它沒有改變，它什麼都不做。我遇到的問題是我的表正在使用數據表進行初始化，然後在刷新數據時加載數據。從頁面導航並返回到它可以正確初始化數據表，但是當通過URL直接訪問頁面或刷新頁面時，只是將數據放在表格的頂部，同時仍然保持「表格中沒有可用數據」，而且沒有數據表功能正在工作。

Answer 1

與Angular ui-router你可以在狀態控制器被調用之前解決你的後端數據。

請看看下面的演示或在這jsFiddle。

它沒有數據表，但這可能是更容易添加的部分。

(function() { 
 
'use strict'; 
 

 
angular.module('demoApp', ['ui.router', 'angularSpinner']) 
 
    .run(StartUp) 
 
    .factory('jobsDataService', JobsDataFactory) 
 
    .config(Config); 
 

 
function JobsDataFactory($http) { 
 
    var backendUrl = 'http://jsonplaceholder.typicode.com'; 
 
    
 
    return { 
 
     get: function(id) { 
 
      return $http.jsonp(backendUrl + '/posts/'+id +'?callback=JSON_CALLBACK') 
 
       .then(function(response) { 
 
        return response.data; 
 
      }); 
 
     } 
 
    }; 
 
} 
 

 
function Config($urlRouterProvider, $stateProvider) { 
 
    $urlRouterProvider.otherwise('/jobs/1'); 
 
    
 
    $stateProvider 
 
     .state('jobs', 
 
       { 
 
        url: '/jobs/:id', 
 
        templateUrl: 'partials/post.html', 
 
        resolve: { 
 
         job: function(jobsDataService, $stateParams) { 
 
          console.log($stateParams.id); 
 
          return jobsDataService.get($stateParams.id); 
 
         } 
 
        }, 
 
        controller: function($scope, job) { 
 
         console.log(job); 
 
         $scope.job = job; 
 
        } 
 
       }); 
 
} 
 

 
function StartUp($rootScope){ 
 
    // only used for loading spinner 
 
    $rootScope 
 
     .$on('$stateChangeStart', 
 
      function(event, toState, toParams, fromState, fromParams){ 
 
       $rootScope.loading = true; 
 
     }); 
 

 
    $rootScope 
 
     .$on('$stateChangeSuccess', 
 
      function(event, toState, toParams, fromState, fromParams){ 
 
       $rootScope.loading = false; 
 
     }); 
 

 
} 
 
    
 
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.1/spin.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-spinner/0.6.2/angular-spinner.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script> 
 

 
<div ng-app="demoApp"> 
 
    <span us-spinner="" ng-if="loading"></span> 
 
    <a href="#" ui-sref='jobs({id: 1})'>job 1</a> 
 
    <a href="#" ui-sref='jobs({id: 2})'>job 2</a> 
 
    <a href="#" ui-sref='jobs({id: 3})'>job 3</a> 
 
    <div ui-view=""></div> 
 
    
 
    <script type="text/ng-template" id="partials/post.html"> 
 
     <p>debug id = {{job.id}}</p> 
 
     <h1>{{job.title}}</h1> 
 
     <p>{{job.body}}</p> 
 
    </script> 
 
</div>