角數據表不適用正確

Question

這裏是我的html代碼：

<div ng-controller="withAjaxCtrl"> 
    <table datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="row-border hover"></table> 
</div> 

這裏是我的控制器：

(function() { 

var manageBackOrdersController = function ($scope, $http, $routeParams) { 

    $http({ 
     url: '/Profiles/firstJson', 
     method: "GET", 
     params: {} 
    }).success(function (data) { 
     var JSON = data; 
     $scope.data = JSON; 

    }); 

} 

manageBackOrdersController.$inject = ['$scope', '$http', '$routeParams']; 

angular.module('customersApp') 
    .controller('manageOrdersController', manageOrdersController); 

angular.module('datatablesSampleApp', ['datatables']) 
    .controller('withAjaxCtrl', function ($scope, DTOptionsBuilder, DTColumnBuilder) { 
     $scope.dtOptions = DTOptionsBuilder.fromSource('scope.data') 
      .withPaginationType('full_numbers'); 
     $scope.dtColumns = [ 
      DTColumnBuilder.newColumn('Customer').withTitle('Customer') 
     ]; 
    }); 

}()); 

當我跑我的網頁，我得到一個錯誤說「錯誤：[NG：AREQ ]參數'withAjaxCtrl'不是一個函數，沒有定義「。我的數據被存儲在$ scope.data中。

Answer 1

恭喜，Sameer的回答不正確。我花了兩天漫長的日子，但我找到了解決辦法。

你必須記住什麼是2個顧慮：

1. 使用DTOptionsBuilder.fromFnPromise和
2. 讓你的工廠內自己的諾言。

這是正確的解決方案：

'use strict'; 
WithResponsiveCtrl.$inject = ['DTOptionsBuilder', 'DTColumnBuilder', 'simpleFactory']; 
angular.module('showcase.withResponsive', []) 
.controller('WithResponsiveCtrl', WithResponsiveCtrl); 

function WithResponsiveCtrl(DTOptionsBuilder, DTColumnBuilder, simpleFactory) { 
var vm = this; 
vm.dtOptions = DTOptionsBuilder.fromFnPromise(function() { 
    return simpleFactory.getData(); }).withPaginationType('full_numbers') 
    // Active Responsive plugin 
    .withOption('responsive', true); 
vm.dtColumns = [ 
    DTColumnBuilder.newColumn('id').withTitle('ID'), 
    DTColumnBuilder.newColumn('firstName').withTitle('First name'), 
    // .notVisible() does not work in this case. Use .withClass('none') instead 
    DTColumnBuilder.newColumn('lastName').withTitle('Last name').withClass('none') 
]; } 

---

simpleFactory.$inject = ['$http', '$q', '$log']; 
angular.module('showcase.withResponsive').factory('simpleFactory', simpleFactory); 
function simpleFactory($http, $q, $log) { 
return { 
    getData: function() { 
     var deferred = $q.defer(); 
     $http.get('api/data.json') 
      .success(function (data) { 
       deferred.resolve(data); 
      }).error(function (msg, code) { 
       deferred.reject(msg); 
       $log.error(msg, code); 
      }); 
     return deferred.promise; 
    } 
} };