角度数据表应用不正确

这是我的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.

中恕我直言，Sameer的回答是错误的。我花了整整两天的时间，但我找到了解决办法。

你必须记住的是两个问题：

使用DTOptionsBuilder.fromFnPmise，以及
在你的工厂里兑现你的承诺

这是正确的解决方案：

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

相关内容

最新更新

热门标签：