Javascript 指令中的angularjs编译函数问题

我刚刚开始学习如何生成指令，我正在尝试生成一个自定义的表分页指令（我知道有一些现有的指令，但我选择生成自己的指令）。到目前为止，这个指令计算出表中有多少行（不包括嵌套表/行），以便在实际分页时使用它来分隔表。它还计算出表在列中的宽度，以便知道将页码放在哪里（表的右下角）。我向指令发送数据，告诉它每页表中应该有多少个结果（tAttrs.defaultPageLength）。它似乎正确地完成了所有的计算，甚至正确地创建了包含页码的数组，但是当它在ng中使用PageNumber数组时，在下面的模板中重复，它从不会从两个页面更改。I console.log（PageNumber），它会根据用户每页需要多少项而改变。有人知道我做错了什么吗？先谢谢你

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) {

            }

        }
    }
});

var myApp=angular.module（“主模块”）；
指令（“分页表”，函数（）{
返回{
限制：“A”，
作用域：{}，
编译：函数（TELM、tAttrs、transclude）{
tAttrs.defaultPageLength=tAttrs.defaultPageLength==未定义？5:Attrs.defaultPageLength；
console.log（tAttrs.defaultPageLength）；
var rowCount=（$（telm）.find（'>*>tr:last'）.index（）+1）；//主表中有多少行（不包括嵌套表中的任何行）
var numberOfPages=Math.ceil（rowCount/tAttrs.defaultPageLength）；
var showEnds=tAttrs.showEnds；
var PageNumber=[]；
var max=0；
$（tElem）.find（'*'）.children（'tr'）。each（function（）{//查找主表中的列数
变量计数=$（this）.children（'td'）.length；
如果（计数>最大值）{
最大值=计数；
}
});
对于（var i=1；i我发现了问题所在。我必须将局部变量pageNumber的值分配给link函数中的作用域，以便ng repeat中的{pageNumber}}可以引用某些内容。在它引用父控制器上同名的变量之前（这就是为什么无论我对指令中的变量做了什么，页数都不会改变）。一旦我从父控制器范围中删除了该变量，并在链接函数中将PageNumber分配给scope.PageNumber，它就会正常工作

<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>