AngularJS-TypeError:$element.fund(..).each不是一个函数

Question

我正在尝试在angularJS中使用数据表。这是我的HTML代码：

<div ng-app="datatable">
<div ng-controller="voucherlistcontroller">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0"
my-table="overrideOptions"
aa-data="voucherList"
ao-column-defs="columnDefs"
fn-row-callback="myCallback" >
<thead>
<tr>
<th>VIN Date</th>
<th>VIN No</th>
<th>Receive Type</th>
<th>Amount</th>
<th>Particulars</th>
<th>Posted</th>
<th>Status</th>
<th>Preview</th>
</tr>
</thead>
<tbody ng-repeat = " vlist in voucherList">
<tr>
<td>{{vlist.vindate}}</td>
<td>{{vlist.vinno}}</td>
<td>{{vlist.receivetype}}</td>
<td>{{vlist.amount}}</td>
<td>{{vlist.particulars}}</td>
<td>{{vlist.posted}}</td>
<td>{{vlist.status}}</td>
<td>{{vlist.preview}}</td>
</tr>
</tbody>
</table>
</div>
</div>

这是我的angularJS代码：

var dialogApp = angular.module('datatable', []);
dialogApp.directive('myTable', function() {
return function(scope, element, attrs) {
// apply DataTable options, use defaults if none specified by user
var options = {};
if (attrs.myTable.length > 0) {
options = scope.$eval(attrs.myTable);
} else {
options = {
"bStateSave": true,
"sDom":"lftipr",
"searching": true,
"iCookieDuration": 2419200, /* 1 month */
"bJQueryUI": true,
"bPaginate": true,
"bLengthChange": false,
"bFilter": false,
"bInfo": false,
"bDestroy": true
};
}
// Tell the dataTables plugin what columns to use
// We can either derive them from the dom, or use setup from the controller
var explicitColumns = [];
element.find('th').each(function(index, elem) {
explicitColumns.push($(elem).text());
});
if (explicitColumns.length > 0) {
options["aoColumns"] = explicitColumns;
} else if (attrs.aoColumns) {
options["aoColumns"] = scope.$eval(attrs.aoColumns);
}
// aoColumnDefs is dataTables way of providing fine control over column config
if (attrs.aoColumnDefs) {
options["aoColumnDefs"] = scope.$eval(attrs.aoColumnDefs);
}
if (attrs.fnRowCallback) {
options["fnRowCallback"] = scope.$eval(attrs.fnRowCallback);
}
// apply the plugin
var dataTable = element.dataTable(options);

// watch for any changes to our data, rebuild the DataTable
scope.$watch(attrs.aaData, function(value) {
var val = value || null;
if (val) {
dataTable.fnClearTable();
dataTable.fnAddData(scope.$eval(attrs.aaData));
}
});
};
});
dialogApp.controller("voucherlistcontroller" ,function Ctrl($scope) {
$scope.message = '';
$scope.myCallback = function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
$('td:eq(2)', nRow).bind('click', function() {
$scope.$apply(function() {
$scope.someClickHandler(aData);
});
});
return nRow;
};
$scope.someClickHandler = function(info) {
$scope.message = 'clicked: '+ info.price;
};
$scope.columnDefs = [
{ "mDataProp": "vindate", "aTargets":[0]},
{ "mDataProp": "vinno", "aTargets":[1] },
{ "mDataProp": "receivetype", "aTargets":[2]},
{ "mDataProp": "amount", "aTargets":[3]},
{ "mDataProp": "particulars", "aTargets":[4]},
{ "mDataProp": "posted", "aTargets":[5]},
{ "mDataProp": "status", "aTargets":[6]},
{ "mDataProp": "preview", "aTargets":[7]}
];
$scope.overrideOptions = {
"bStateSave": true,
"sDom":"lftipr",
"searching": true,
"iCookieDuration": 2419200, /* 1 month */
"bJQueryUI": true,
"bPaginate": true,
"bLengthChange": false,
"bFilter": false,
"bInfo": false,
"bDestroy": true
};

$scope.voucherList = [--some data-];

但它并不被视为一个功能元素。它显示了-TypeError:element.find(…(.each不是Object处的函数

但我想我已经在html页面上给出了所有的参考资料。参考文献列表如下：

• JQuery-1.9.0
• JQUery migrate 1.2.1.js
• 引导程序.bundle.min.js
• jquery-ui.min.js
• http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.8.2/jquery.dataTables.min.js
• https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js
• https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js

如何解决此问题？请帮忙！！！

Answer 1

由于元素是dom元素而不是jQuery对象，因此发生错误。它将是：

$(element).find('th').each(function(index, elem) {
explicitColumns.push($(elem).text());
});

代替：

element.find('th').each(function(index, elem) {
explicitColumns.push($(elem).text());
});