How to pass the DTOptionsBuilder and DTColumnBuilder to the controller in angular-datatables

Bill_Data23 picture Bill_Data23 · Jun 27, 2016 · Viewed 7.9k times · Source

I started to learn AngularJS-1.5.7 and also angular-datatables. I followed some examples in this page https://l-lin.github.io/angular-datatables/#/withResponsive the one that is for responsive tables, and the one that is for using bootstrap styling. I adapted the examples to make them work in my application, but now I have the following problem:

If I declare my controller in this way:

angular.module('MyApp', ['datatables', 'datatables.bootstrap'])
    .controller('BootstrapIntegrationCtrl', BootstrapIntegrationCtrl);

function BootstrapIntegrationCtrl(DTOptionsBuilder, DTColumnBuilder) {
var vm = this;
vm.dtOptions = DTOptionsBuilder.fromSource('http://localhost:8080/Myapp/user/getUser')
        .withPaginationType('full_numbers')
        // Add Bootstrap compatibility
        .withBootstrap()
        // Active Responsive plugin
        .withOption('responsive', true);
vm.dtColumns = [
    DTColumnBuilder.newColumn('idUser').withTitle('ID'),
    DTColumnBuilder.newColumn('name').withTitle('Name'),
    DTColumnBuilder.newColumn('lastName').withTitle('Last Name'),
    // .notVisible() does not work in this case. Use .withClass('none') instead
//    

DTColumnBuilder.newColumn('roleList').withTitle('Role List').withClass('none')
    DTColumnBuilder.newColumn('roleList').withTitle('Role List')
];
}

The other controllers in my application stop working, but the example works fine, the page that has the BootstrapIntegrationCtrl works fine and the tables shows up without any issues, but the other controllers stop working.

My other controllers are defined like this:

angular.module('MyApp')
    .controller('RoleCtrl', ['$scope', 'RoleService', 'modalService',
        function ($scope, RoleService, modalService) {
}]);

but If I try to pass the DTOptionsBuilder or DTColumnBuilder to my controller in the following way I get the undefined error

this cause undefined in the line where I use any of this variables

DTOptionsBuilder, DTColumnBuilder 

this cause undefined error

angular.module('MyApp')
    .controller('RoleCtrl', ['$scope', 'RoleService', 'modalService',
        function ($scope, RoleService, modalService, DTOptionsBuilder, DTColumnBuilder) {
var vm = this;
vm.dtOptions = DTOptionsBuilder.fromSource('http://localhost:8080/Myapp/user/getUser')
        .withPaginationType('full_numbers')
        // Add Bootstrap compatibility
        .withBootstrap()
        // Active Responsive plugin
        .withOption('responsive', true);
vm.dtColumns = [
    DTColumnBuilder.newColumn('idUser').withTitle('ID'),
    DTColumnBuilder.newColumn('name').withTitle('Name'),
    DTColumnBuilder.newColumn('lastName').withTitle('Last Name'),
    // .notVisible() does not work in this case. Use .withClass('none') instead
//    

DTColumnBuilder.newColumn('roleList').withTitle('Role List').withClass('none')
    DTColumnBuilder.newColumn('roleList').withTitle('Role List')
];


}]);

I need those variables in my controller but I don't know how to pass them. I also tried using the $scope variable like this $scope.DTColumnBuilder but I get the same undefined error.

Answer