0
我剛開始學習如何製作指令，我正在嘗試製作一個自定義表格分頁指令（我知道現有的指令，但我選擇自己製作）。到目前爲止，該指令計算出表中有多少行（不包括嵌套的表/行），以便在實際分頁時可以使用它來分隔表。它還計算出表格在列中的寬度，因此它知道在哪裏放置頁碼（表格右下方）。我發送數據到指令，告訴它每個頁面應該有多少個結果（tAttrs.defaultPageLength）。它似乎正確地做了所有的數學計算，甚至使數組中的頁碼正確，但是當它在下面的模板中使用ng-repeat中的pageNumbers數組時，它從不會從兩個頁面更改。我console.log（pageNumbers），它會根據用戶想要的每個頁面有多少項目進行更改。有誰知道我做錯了什麼？先謝謝你。angularjs編譯指令中的函數問題
var myApp = angular.module("mainModule");
myApp.directive("paginateTable", function() {
return {
restrict: 'A',
scope: {},
compile: function (tElem, tAttrs, transclude) {
tAttrs.defaultPageLength = tAttrs.defaultPageLength === undefined ? 5 : Attrs.defaultPageLength;
console.log(tAttrs.defaultPageLength);
var rowCount = ($(tElem).find(' > * > tr:last').index() + 1); //how many rows are in main table (excluding any rows in nested tables)
var numberOfPages = Math.ceil(rowCount/tAttrs.defaultPageLength);
var showEnds = tAttrs.showEnds;
var pageNumbers = [];
var max = 0;
$(tElem).find('*').children('tr').each(function() { //find the number of columns in the main table
var count = $(this).children('td').length;
if (count > max) {
max = count;
}
});
for (var i = 1; i <= numberOfPages; i++) { //create an array of page numbers for use in the ng-repeats down below in the HTML
pageNumbers.push(i);
}
console.log(pageNumbers);
if (showEnds === 'true') {
$(tElem).find(' > * > tr:last').after('<tr><td colspan="' + (max - 1) +
'"></td><td><div class="btn-group"> <button type="button" class="btn btn-default">First</button>' +
'<button type="button" class="btn btn-default" ng-repeat="pageNumber in pageNumbers">{{pageNumber}}</button>' +
'<button type="button" class="btn btn-default">Last</button> </div></td></tr > ');
} else {
$(tElem).find(' > * > tr:last').after('<tr><td colspan="' + (max - 1) +
'"></td><td><div class="btn-group"> <button type="button" class="btn btn-default"' +
'ng-repeat = "pageNumber in pageNumbers">{{pageNumber}}</button> </div></td></tr >');
}
return function (scope, element, attrs) {
}
}
}
});
這是HTML的一面：
<div class="row">
<div class="col-xs-12">
<table id="pageTable" class="table" paginate-table show-ends="true" default-page-length="6">
<tr>
<th>heading 1</th>
<th>heading 2</th>
<th>heading 3</th>
<th>heading 4</th>
</tr>
<tr>
<td>entry 1</td>
<td>entry 2</td>
<td>entry 3</td>
<td>entry 4</td>
</tr>
<tr>
<td>entry 1</td>
<td>entry 2</td>
<td>entry 3</td>
<td>entry 4</td>
</tr>
<tr>
<td>entry 1</td>
<td>entry 2</td>
<td>entry 3</td>
<td>entry 4</td>
</tr>
<tr>
<td>entry 1</td>
<td>entry 2</td>
<td>entry 3</td>
<td>entry 4</td>
</tr>
<tr>
<td>entry 1</td>
<td>entry 2</td>
<td>entry 3</td>
<td>
<table>
<tr>
<td>
test1
</td>
</tr>
<tr>
<td>
test2
</td>
</tr>
<tr>
<td>
test3
</td>
</tr>
<tr>
<td>
test4
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>