Angularjs datatable插件第二次未绑定

Question

我使用angularjs数据表和两个名为withButton和withColumnfilter的插件。

我正在使用oclazyload加载插件文件。不知何故，当我第一次为datatable加载页面时，它有上面一个插件。这将工作得很好，但如果我改变的页面，也有数据与另一个插件，然后它给我“不是一个函数”的错误。

$stateProvider.state('firms.browse', {
        url: "/browse",
        templateUrl: "modules/firms/browse/browse.html",
        controller: 'browseController',
        data: {pageTitle: 'Browse Firm'},
        resolve: {
            loadPlugin: function ($ocLazyLoad) {
                return $ocLazyLoad.load([{
                    serie: true,
                    files: ['js/plugins/dataTables/datatables.min.js', 'js/plugins/dataTables/dataTables.columnFilter.js', 'css/plugins/dataTables/datatables.min.css']
                }, {
                    serie: true,
                    name: 'datatables',
                    files: ['js/plugins/dataTables/angular-datatables.min.js']
                }, {
                    serie: true,
                    name: 'datatables.columnfilter',
                    files: ['js/plugins/dataTables/angular-datatables.columnfilter.min.js']
                }, {
                    serie: true,
                    name: 'datatables.buttons',
                    files: ['js/plugins/dataTables/angular-datatables.buttons.min.js']
                }]);
            },
            checkUserPermission: checkUserPermission('attorney_firm', 'view')
        }
    }).state('invoice.browse', {
        url: "/browse?invoice_number",
        templateUrl: "modules/invoice/browse.html",
        controller: 'invoiceController',
        data: {pageTitle: 'invoice'},
        resolve: {
            loadPlugin: function ($ocLazyLoad) {
                return $ocLazyLoad.load([{
                    serie: true,
                    files: ['js/plugins/dataTables/datatables.min.js', 'css/plugins/dataTables/datatables.min.css','css/plugins/ng-tags-input/ng-tags-input.css','css/plugins/ng-tags-input/ng-tags-input.bootstrap.css']
                }, {
                    serie: true,
                    name: 'datatables',
                    files: ['js/plugins/dataTables/angular-datatables.min.js']
                }, {
                    serie: true,
                    name: 'datatables.light-columnfilter',
                    files: ['js/plugins/dataTables/dataTables.lightColumnFilter.js','js/plugins/dataTables/angular-datatables.light-columnfilter.js']
                },
                {
                    files: ['css/plugins/iCheck/custom-blue.css', 'js/plugins/iCheck/icheck.min.js']
                },
                {
                    insertBefore: '#loadBefore',
                    name: 'localytics.directives',
                    files: ['css/plugins/chosen/bootstrap-chosen.css', 'js/plugins/chosen/chosen.jquery.js', 'js/plugins/chosen/chosen.js']
                },
                {
                    serie: true,
                    name: 'ngTagsInput',
                    files: ['js/plugins/ng-tags-input/ng-tags-input.min.js']
                }
                ]);
            },
            checkUserPermission: checkUserPermission('invoice', 'view')
        }
    })

上面是config.js文件的代码。

$scope.dtOptions = DTOptionsBuilder.newOptions()
            .withDataProp('data')
            .withOption('ajax', function (data, callback, settings) {
                // map your server's response to the DataTables format and pass it to
                invoiceFactory.showDataTable('/api/invoice/get-invoice-listing', data).success(function (res) {
                    if (res.error) {
                        $scope.reloadData();
                    }
                    else {
                        $scope.selectAll = true;
                        $scope.invoiceArray = {};
                        callback(res);
                    }
                }).error(function (err) {
                    if (err.error !== "token_not_provided") {
                        $scope.reloadData();
                    }
                });
            })
            .withOption('processing', true)
            .withLanguage({
                "sEmptyTable": "NO INVOICE AVAILABLE IN TABLE",
                "sInfo": "SHOWING _START_ TO _END_ OF _TOTAL_ INVOICES",
                "sInfoEmpty": "SHOWING 0 TO 0 OF 0 INVOICES",
                "sInfoFiltered": "(FILTERED FROM _MAX_ TOTAL INVOICES)",
                "sInfoPostFix": "",
                "sInfoThousands": ",",
                "sLengthMenu": "SHOW _MENU_ INVOICES",
                "sLoadingRecords": "<img src='img/loading_bar.gif'/>",
                "sProcessing": "<img src='img/loading_bar.gif'/>",
                "sSearch": "SEARCH:",
                "sZeroRecords": "NO MATCHING INVOICE FOUND",
                "oPaginate": {
                    "sFirst": "FIRST",
                    "sLast": "LAST",
                    "sNext": "NEXT",
                    "sPrevious": "PREVIOUS"
                },
                "oAria": {
                    "sSortAscending": ": ACTIVATE TO SORT COLUMN ASCENDING",
                    "sSortDescending": ":   ACTIVATE TO SORT COLUMN DESCENDING"
                }
            })
            // .withOption('language', {"processing": "<img src='img/loading_bar.gif'/>",
            //     "sZeroRecords": "<div class='text-center'>No Record Found!</div>",
            //     "sInfo": "Showing START to END of TOTAL Records",
            //     "sInfoEmpty": "Showing 0 to 0 of 0 Records",
            //     "sInfoFiltered": "(filtered from MAX total Records)"})
            .withOption('serverSide', true)
            .withOption('stateSave', true)
            .withPaginationType('simple_numbers')
            .withOption('searchDelay', 500)
            .withOption('order', [1, 'desc'])
            .withOption('createdRow', $scope.createdRow)
            .withOption('headerCallback', function (header) {
                // Use this headerCompiled field to only compile header once
                if (!$scope.headerCompiled) {
                    $compile(angular.element(header).contents())($scope);
                }
            })
            .withLightColumnFilter({
                '1': {
                    type: 'text'
                },
                '2': {
                    type: 'text'
                },
                '3': {
                    type: 'text'
                },
                '4': {
                    type: 'text'
                },
                '5': {
                    type: 'text'
                },
                '6': {
                    type: 'text'
                }
            });

上面是控制器代码。

​

​

Answer 1

您得到的错误是因为angular datatables不能识别名为withLightColumnFilter的函数。

您可能已经将其添加为插件，但我猜这不是使用它的方式。

如果这个插件的文档没有给你一个清晰的例子，我会试试这个。

$scope.dtOptions = DTOptionsBuilder.newOptions()
     ...
.withOption('LightColumnFilter', {
     ...
 };

Answer 2

我认为这都是因为懒惰加载，因为我也面临着这种类型的问题。所以我认为你需要直接加载到你的index.html文件中，而不是延迟加载。

Answer 3

这看起来像是一个'withButton‘错误，所以如果你的datatables.min.js已经包含了'buttons’插件，请检查它是否被添加到模块依赖项中

angular.module('moduelName', ['datatables.buttons'])