Question

我刚刚开始学习如何制作指令，我正在尝试制作一个自定义的表格分页指令（我知道那里有现有指令，但我选择自己制作）。到目前为止，该指令指出了表中有多少行（不计算嵌套表/行），以便在我到达实际分页时可以使用它来分隔表。它还会计算出表格在列中的宽度，以便知道页码的放置位置（表格的右下角）。我将数据发送到指令，告诉它每页应该有多少结果（tAttrs.defaultPageLength）。它似乎正确地完成了所有的数学运算，甚至正确地使用了页码中的数字，但是当它在下面的模板中使用ng-repeat中的pageNumbers数组时，它永远不会从两个页面改变。我是console.log（pageNumbers），它根据用户想要的每页数量而改变。有谁知道我做错了什么？提前谢谢。

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>

Answer 1

我弄清楚问题是什么。我必须将局部变量pageNumbers的值赋给link函数中的作用域，以便ng-repeat中的{{pageNumber}}可以引用。在它引用父控制器上具有相同名称的变量之前（这就是为什么页面数量永远不会改变，无论我对指令中的变量做了什么）。一旦我从父控制器范围中删除了该变量，并在link函数中将pageNumbers分配给scope.pageNumbers，它就能正常工作。

angularjs在指令中编译函数问题

1 个答案: