Question

我正在尝试在我的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)

这是我的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＆＃39;正在重新创建模块而不是检索模块。以下内容来自official anguljs module docs

创建与检索

请注意使用angular.module（＆＃39; myModule＆＃39;，[]）将创建   模块myModule并覆盖任何名为myModule的现有模块。使用   angular.module（＆＃39; myModule＆＃39;）检索现有模块。

^这有效地破坏了其他地方设置的依赖关系（比如来自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

1 个答案: