0

我正在构建一个应用程序，它具有客户端（前端）、angularJS 和 angular-datatables（包含在模式中），与使用 symfony 框架的服务器端（后端）分开。

不幸的是，我有一个与 datatable 相关的类似错误：

TypeError: n.hide is not a function
at Object.n [as showLoading] (http://....dev/server/assets/client/dist/vendor.min.js:33:6014)
at http://....dev/server/assets/client/dist/vendor.min.js:33:433
at http://....dev/server/assets/client/dist/vendor.min.js:2:580
at m (http://....dev/server/assets/client/dist/vendor.min.js:1:27139)
at s (http://....dev/server/assets/client/dist/vendor.min.js:1:23018)
at m (http://....dev/server/assets/client/dist/vendor.min.js:1:27084)
at s (http://....dev/server/assets/client/dist/vendor.min.js:1:23018)
at s (http://....dev/server/assets/client/dist/vendor.min.js:1:23035)
at http://....dev/server/assets/client/dist/vendor.min.js:1:22641
at T.r (http://....dev/server/assets/client/dist/vendor.min.js:1:23490) <table datatable="" dt-options="mad.dtOptions" dt-columns="mad.dtColumns" dt-instance="mad.dtInstance" class="table table-striped table-bordered dataTable ng-isolate-scope">

模板：

<div ng-controller="modalAndDatatable as mad">
    <table datatable dt-options="mad.dtOptions" dt-columns="mad.dtColumns" dt-instance="mad.dtInstance"
           class="table table-striped table-bordered dataTable">
    </table>
</div>

控制器：

reporting.controller('modalAndDatatable', function($scope, moduleConfig, DTOptionsBuilder, DTColumnBuilder) {

var baseUrl = moduleConfig[ENV].apiBaseUrl + "/portal";
$scope.imageUrl = moduleConfig[ENV].imageUrl;

var vm = this;

vm.dtInstance = {};

var getColumnForReport = function (reportId, subReportId) {
    /*
     * Columns for Report
     * reportId = 1
     */
    if (reportId == 1) {
        /*
         * Columns for SD Report
         * subReportId = 3
         */
        if (subReportId == 3) {
            vm.dtColumns = [
                DTColumnBuilder.newColumn('10W').withTitle('10W'),
                DTColumnBuilder.newColumn('10S').withTitle('10S'),
                DTColumnBuilder.newColumn('10F').withTitle('10F')
            ];
        }
    }
};

var extraParam = "";
$scope.loadingDOM = '<div class="loading-spiner-reports">' +
    '<div class="loading-spiner"><img src="' + $scope.imageUrl + 'images/loader.gif"  width="100"/></div></div>';

if ($scope.selectedSubItem)
    extraParam = '/' + $scope.selectedSubItem;

vm.dtOptions = DTOptionsBuilder.newOptions()
    .withOption('ajax', {
        url: baseUrl + '/ag-report/' + $scope.selectedItem + extraParam,
        type: 'POST'
    })
    .withDataProp('aaData')
    .withOption('processing', true)
    .withOption('language', {
        'sLoadingRecords': $scope.loadingDOM,
        'sProcessing': $scope.loadingDOM
    })
    .withOption('serverSide', true)
    .withPaginationType('full_numbers')
    .withOption('scrollY', '275px')
    .withOption('scrollX', '100%')
    .withOption('scrollCollapse', true)
    .withOption('initComplete', function () {
        $('<button>').text('search').attr('id', 'new-search').attr('class', 'btn btn-default btn-sm').appendTo('.dataTables_filter');
        $('.dataTables_filter input').unbind();
        $('#new-search').on('click', function () {
            $scope.mad.dtInstance.DataTable.search($('.dataTables_filter input').val()).draw();
        });
    });

getColumnForReport($scope.selectedItem, $scope.selectedSubItem);});

所需的 javascript 文件也按请求的顺序排列（jquery.min.js、jquery.dataTables.min.js、angular.min.js、angular-datatables.min.js）。

我不得不提到，当客户端与服务器分开使用时，一切都按预期工作，但是当客户端在 ruby​​ (rake) 和 gulp 的帮助下部署在服务器端时，并且所有脚本都被缩小时，就会发生错误。

有什么想法可能是错的吗？

谢谢。

4

0 回答 0