Use Angular-Datatable in Umbraco 7 custom section

Question

I am trying to use an angular datatable with server side processing in my umbraco custom section. My problem is that when I use this line:

angular.module('umbraco', ['datatables'])

if I include the datatables dependency I get the following error:

angular.min.js?cdv=886402897:63 Error: Argument 'Umbraco.MainController' is not a function, got undefined
    at Error (native)
    at cb (http://localhost:65055/umbraco/lib/angular/1.1.5/angular.min.js?cdv=886402897:17:114)
    at xa (http://localhost:65055/umbraco/lib/angular/1.1.5/angular.min.js?cdv=886402897:17:187)
    at $get (http://localhost:65055/umbraco/lib/angular/1.1.5/angular.min.js?cdv=886402897:53:310)
    at http://localhost:65055/umbraco/lib/angular/1.1.5/angular.min.js?cdv=886402897:44:274
    at n (http://localhost:65055/umbraco/lib/angular/1.1.5/angular.min.js?cdv=886402897:7:74)
    at k (http://localhost:65055/umbraco/lib/angular/1.1.5/angular.min.js?cdv=886402897:44:139)
    at e (http://localhost:65055/umbraco/lib/angular/1.1.5/angular.min.js?cdv=886402897:40:139)
    at e (http://localhost:65055/umbraco/lib/angular/1.1.5/angular.min.js?cdv=886402897:40:156)
    at e (http://localhost:65055/umbraco/lib/angular/1.1.5/angular.min.js?cdv=886402897:40:156)

this is my package.manifest:

javascript : [      
            '~/App_Plugins/BlogShop/backoffice/BlogShopTree/js/jquery.dataTables.js',
            '~/App_Plugins/BlogShop/backoffice/BlogShopTree/js/angular-datatables.js',
            '~/App_Plugins/BlogShop/backoffice/BlogShopTree/js/serverSideProcessing.js',    
    ],

This is the controller:

angular.module('umbraco',['datatables']).controller('datatable.Controller', function (DTOptionsBuilder, DTColumnBuilder) {
    vm.dtOptions = DTOptionsBuilder.newOptions()
        .withOption('ajax', {
            // Either you specify the AjaxDataProp here
            // dataSrc: 'data',
            url: '/angular-datatables/data/serverSideProcessing',
            type: 'POST'
        })
     // or here
     .withDataProp('data')
        .withOption('processing', true)
        .withOption('serverSide', true)
        .withPaginationType('full_numbers');
    vm.dtColumns = [
        DTColumnBuilder.newColumn('Id').withTitle('ID'),
        DTColumnBuilder.newColumn('Name').withTitle('First name'),
        DTColumnBuilder.newColumn('Father').withTitle('Last name').notVisible()
    ];
});

And the HTML:

<div ng-controller="datatable.Controller as showCase">
            <table datatable="" dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="row-border hover"></table>
        </div>

What am I doing wrong?

try this ...our.umbraco.org/forum/umbraco-7/using-umbraco-7/… — activebiz
– activebiz, Commented May 12, 2015 at 11:00
with: var app = angular.module('umbraco', []); app.requires.push('datatables'); i keep getting the same error — Pau
– Pau, Commented May 12, 2015 at 11:11

pc-pdx · Accepted Answer · 2015-05-12 21:53:42Z

4

The issue is that the 'umbraco' module is being recreated rather than retrieved. The following is quoted from the official anguljs module docs

Creation versus Retrieval

Beware that using angular.module('myModule', []) will create the module myModule and overwrite any existing module named myModule. Use angular.module('myModule') to retrieve an existing module.

^This effectively destroys the dependencies set elsewhere (like those from umbraco). Your usage of datatables seems that you don't need Try with the following. I'm afraid i can't test this code withyour example 100% as i don't have your serverside backing, but the approach is tested and is a pattern that i have used extensively. The big difference is not including the requires argument which, if specified - (re)creates the module.

var app = angular.module("umbraco");
        app.requires.push('datatables'); 

        app.controller('datatable.Controller', function (DTOptionsBuilder, DTColumnBuilder) {
            vm.dtOptions = DTOptionsBuilder.newOptions()
                .withOption('ajax', {
                    // Either you specify the AjaxDataProp here
                    // dataSrc: 'data',
                    url: '/angular-datatables/data/serverSideProcessing',
                    type: 'POST'
                })
             // or here
             .withDataProp('data')
                .withOption('processing', true)
                .withOption('serverSide', true)
                .withPaginationType('full_numbers');
            vm.dtColumns = [
                DTColumnBuilder.newColumn('Id').withTitle('ID'),
                DTColumnBuilder.newColumn('Name').withTitle('First name'),
                DTColumnBuilder.newColumn('Father').withTitle('Last name').notVisible()
            ];
        });

edited May 12, 2015 at 21:53

answered May 12, 2015 at 21:41

pc-pdx

5022 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pau Over a year ago

Thank you, that was the problem

rosko Over a year ago

@Pau did you make angular datatables work with umbraco 7? How? As far as I know it requires angular in version >= 1.3 but umbraco uses 1.1.5...

rosko Over a year ago

Doing the same as mentioned above I got the following error: "RangeError: Maximum call stack size exceeded at Object.toString (native) at Function.x.extend.type " for the basic angular datatables example.

Collectives™ on Stack Overflow

Use Angular-Datatable in Umbraco 7 custom section

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related