角度数据表错误 - 未定义不是函数
angular-datatables error - undefined is not a function
我正在使用 angular 数据表构建报告。当我执行我的页面时,我的 angular.js 文件中出现错误,指出 undefined 不是函数以及其他一些代码:
TypeError: undefined is not a function
at Object._showLoading [as showLoading] (http://localhost:55823/Scripts/angular-datatables/angular-datatables.renderer.js:8:23)
at showLoading (http://localhost:55823/Scripts/angular-datatables/angular-datatables.directive.js:25:39)
at postLink (http://localhost:55823/Scripts/angular-datatables/angular-datatables.directive.js:17:26)
at http://localhost:55823/Scripts/angular-1.2.19/angular.js:7050:44
at nodeLinkFn (http://localhost:55823/Scripts/angular-1.2.19/angular.js:6648:13)
at compositeLinkFn (http://localhost:55823/Scripts/angular-1.2.19/angular.js:6039:13)
at nodeLinkFn (http://localhost:55823/Scripts/angular-1.2.19/angular.js:6642:24)
at compositeLinkFn (http://localhost:55823/Scripts/angular-1.2.19/angular.js:6039:13)
at compositeLinkFn (http://localhost:55823/Scripts/angular-1.2.19/angular.js:6042:13)
at compositeLinkFn (http://localhost:55823/Scripts/angular-1.2.19/angular.js:6042:13) <table datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="row-border hover datatable ng-isolate-scope">
这是我的 angular 构建表格的函数:
var manageBackOrdersApp = angular.module('manageBackOrdersApp', ['sharedApp', 'datatables']);
(function () {
var manageBackOrdersController = function ($scope, $http, DTOptionsBuilder, DTColumnBuilder) {
$scope.dtOptions = DTOptionsBuilder.fromSource('/Customer/ManageBackOrders/firstJson')
.withPaginationType('full_numbers').withDisplayLength('1000');
$scope.dtColumns = [
DTColumnBuilder.newColumn('CustID').withTitle('Cust ID')
.renderWith(function(data, type, full, meta) {
return '<a target="_blank" href="gmail.com">' + full.CustID + '</a>'
}),
DTColumnBuilder.newColumn('SOID').withTitle('SO ID')
.renderWith(function(data, type, full, meta) {
return '<a target="_blank" href="gmail.com">' + full.SOID + '</a>'
}),
DTColumnBuilder.newColumn('CreateDate').withTitle('SO Date'),
DTColumnBuilder.newColumn('SPerName').withTitle('Sales Rep'),
DTColumnBuilder.newColumn('ItemID').withTitle('Item')
.renderWith(function (data, type, full, meta) {
return '<a target="_blank" href="gmail.com">' + full.ItemID + '</a>'
}),
DTColumnBuilder.newColumn('CurWhseID').withTitle('Cur Whse'),
DTColumnBuilder.newColumn('QtyOnBO').withTitle('QtyOnBO'),
DTColumnBuilder.newColumn('WhseID').withTitle('Avail Whse'),
DTColumnBuilder.newColumn('QtyAvail').withTitle('Qty Avail'),
DTColumnBuilder.newColumn('ShipMethDesc').withTitle('Ship Via'),
DTColumnBuilder.newColumn('HoldReason').withTitle('Comments')
];
}
manageBackOrdersController.$inject = ['$scope', '$http', 'DTOptionsBuilder', 'DTColumnBuilder'];
angular.module('manageBackOrdersApp').controller('manageBackOrdersController', manageBackOrdersController)
}());
最后,这是我的 html:
<div ng-controller="manageBackOrdersController">
<div class="dataTable_top">
<br class="clearit" />
</div>
<table datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="row-border hover datatable"></table>
</div>
我不确定我是否遗漏了什么或有什么问题。据我所知,我拥有数据表工作所需的所有内容。当我运行我的页面时,数据表加载足以显示加载部分,然后出错。谢谢。
我猜你使用的是 v0.1.1。
我认为问题出在 Angular 没有使用 jQuery 而是它的 jqlite。
您需要首先包含 jQuery 和数据表,然后是 Angular,最后是 angular-datatables:
<script src="jquery.min.js"></script>
<script src="jquery.dataTables.min.js"></script>
<script src="angular.min.js"></script>
<script src="angular-datatables.min.js"></script>
我正在使用 angular 数据表构建报告。当我执行我的页面时,我的 angular.js 文件中出现错误,指出 undefined 不是函数以及其他一些代码:
TypeError: undefined is not a function
at Object._showLoading [as showLoading] (http://localhost:55823/Scripts/angular-datatables/angular-datatables.renderer.js:8:23)
at showLoading (http://localhost:55823/Scripts/angular-datatables/angular-datatables.directive.js:25:39)
at postLink (http://localhost:55823/Scripts/angular-datatables/angular-datatables.directive.js:17:26)
at http://localhost:55823/Scripts/angular-1.2.19/angular.js:7050:44
at nodeLinkFn (http://localhost:55823/Scripts/angular-1.2.19/angular.js:6648:13)
at compositeLinkFn (http://localhost:55823/Scripts/angular-1.2.19/angular.js:6039:13)
at nodeLinkFn (http://localhost:55823/Scripts/angular-1.2.19/angular.js:6642:24)
at compositeLinkFn (http://localhost:55823/Scripts/angular-1.2.19/angular.js:6039:13)
at compositeLinkFn (http://localhost:55823/Scripts/angular-1.2.19/angular.js:6042:13)
at compositeLinkFn (http://localhost:55823/Scripts/angular-1.2.19/angular.js:6042:13) <table datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="row-border hover datatable ng-isolate-scope">
这是我的 angular 构建表格的函数:
var manageBackOrdersApp = angular.module('manageBackOrdersApp', ['sharedApp', 'datatables']);
(function () {
var manageBackOrdersController = function ($scope, $http, DTOptionsBuilder, DTColumnBuilder) {
$scope.dtOptions = DTOptionsBuilder.fromSource('/Customer/ManageBackOrders/firstJson')
.withPaginationType('full_numbers').withDisplayLength('1000');
$scope.dtColumns = [
DTColumnBuilder.newColumn('CustID').withTitle('Cust ID')
.renderWith(function(data, type, full, meta) {
return '<a target="_blank" href="gmail.com">' + full.CustID + '</a>'
}),
DTColumnBuilder.newColumn('SOID').withTitle('SO ID')
.renderWith(function(data, type, full, meta) {
return '<a target="_blank" href="gmail.com">' + full.SOID + '</a>'
}),
DTColumnBuilder.newColumn('CreateDate').withTitle('SO Date'),
DTColumnBuilder.newColumn('SPerName').withTitle('Sales Rep'),
DTColumnBuilder.newColumn('ItemID').withTitle('Item')
.renderWith(function (data, type, full, meta) {
return '<a target="_blank" href="gmail.com">' + full.ItemID + '</a>'
}),
DTColumnBuilder.newColumn('CurWhseID').withTitle('Cur Whse'),
DTColumnBuilder.newColumn('QtyOnBO').withTitle('QtyOnBO'),
DTColumnBuilder.newColumn('WhseID').withTitle('Avail Whse'),
DTColumnBuilder.newColumn('QtyAvail').withTitle('Qty Avail'),
DTColumnBuilder.newColumn('ShipMethDesc').withTitle('Ship Via'),
DTColumnBuilder.newColumn('HoldReason').withTitle('Comments')
];
}
manageBackOrdersController.$inject = ['$scope', '$http', 'DTOptionsBuilder', 'DTColumnBuilder'];
angular.module('manageBackOrdersApp').controller('manageBackOrdersController', manageBackOrdersController)
}());
最后,这是我的 html:
<div ng-controller="manageBackOrdersController">
<div class="dataTable_top">
<br class="clearit" />
</div>
<table datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="row-border hover datatable"></table>
</div>
我不确定我是否遗漏了什么或有什么问题。据我所知,我拥有数据表工作所需的所有内容。当我运行我的页面时,数据表加载足以显示加载部分,然后出错。谢谢。
我猜你使用的是 v0.1.1。
我认为问题出在 Angular 没有使用 jQuery 而是它的 jqlite。 您需要首先包含 jQuery 和数据表,然后是 Angular,最后是 angular-datatables:
<script src="jquery.min.js"></script>
<script src="jquery.dataTables.min.js"></script>
<script src="angular.min.js"></script>
<script src="angular-datatables.min.js"></script>