在 Umbraco 7 自定义部分使用 Angular-Datatable

Question

我正在尝试在我的 umbraco 自定义部分中使用 angular 数据表进行服务器端处理。我的问题是当我使用这条线时：

angular.module('umbraco', ['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)

这是我的 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',    
    ],

这是控制器：

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>

我做错了什么？

Answer 1

问题是 'umbraco' 模块正在重新创建而不是检索。以下内容转自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.

^这有效地破坏了在别处设置的依赖项（比如来自 umbraco 的依赖项）。您对数据表的使用似乎不需要尝试以下。恐怕我无法使用您的示例 100% 测试此代码，因为我没有您的服务器端支持，但该方法已经过测试并且是我广泛使用的模式。最大的区别是不包括 requires argument，如果指定 -（重新）创建模块。

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

在 Umbraco 7 自定义部分使用 Angular-Datatable

Use Angular-Datatable in Umbraco 7 custom section

angularjs

umbraco

jquery-datatables