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.