angularjs - Angular 数据表未正确应用

Question

这是我的html代码:

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

这是我的 Controller :

(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 的回答是错误的。我花了两天艰苦的时间，但我找到了解决方案。

您必须牢记两个问题:

1. 使用 DTOptionsBuilder.fromFnPromise，并且
2. 在你的工厂里有你的 promise 。

这是正确的解决方案:

'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;
    }
} };