Используйте Angular-Datatable в пользовательском разделе Umbraco 7

Я пытаюсь использовать angular datatable с обработкой на стороне сервера в моем пользовательском разделе umbraco. Моя проблема заключается в том, что когда я использую эту строку: 

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

Если я включаю зависимость datatables, я получаю следующую ошибку: 

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)
Это мой пакет.манифест: 
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',    
    ],

Это контроллер: 

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()
    ];
});

И HTML: 

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

Что я делаю не так?

1 2
angularjs jquery-datatables umbraco

1 ответ:

Проблема заключается в том, что модуль "umbraco" создается заново, а не извлекается. Ниже приводится цитата из официального модуля anguljs docs

Создание и извлечение

Будьте осторожны, используя angular.модуль ('myModule', []) создаст модуль myModule и перезаписать любой существующий модуль с именем myModule. Воспользуйся угловатый.модуль ('myModule') для извлечения существующего модуля.

^это эффективно разрушает набор зависимостей в других местах (например, в умбрако). Ваше использование таблиц данных кажется, что вам не нужно Попробуйте сделать следующее. Боюсь, что я не могу протестировать этот код с вашим примером на 100%, поскольку у меня нет вашей серверной поддержки, но подход протестирован и является шаблоном, который я широко использовал. Большая разница заключается не в том, что требует аргумента , который, если указан - (re) создает модуль.

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()
            ];
        });
3