Question

我正在尝试为页面上2个位置存在的分页创建自定义指令。我有2个数据表，我想使用相同的分页指令。这是我的指示

app.directive('pagination', function () {
        return {

            restrict: 'A',
            template: '<div ng-if="!isLoading" class="backup-pagination">\
                        <input type="button" ng-disabled="currentPage == 0" ng-click="currentPage = currentPage - 1" value="Prev" />\
                        <span>{{ currentPage+1 }} / {{ numberOfPages(backupList) }}</span>\
                        <input type="button" ng-disabled="currentPage >= backupList.length/pageSize - 1" ng-click="currentPage = currentPage + 1" value="Next" />\
                    </div>',
            scope : {
                currentPage: '=',
                backupList: '='
            },
            link: function(scope, elem, attrs){

            }
        }
    });

这是DOM

这是表格的一个分页指令

<div ng-if="!isLoading" pagination backup-type="active" current-page="ActiveCurrentPage" backup-list="data.ActiveBackups"></div>

这是另一张表格的另一张

<div ng-if="!isLoading" pagination backup-type="inactive" current-page="InactiveCurrentPage" backup-list="data.InactiveBackups"></div>

问题是我的分页指令似乎无法访问控制器的父作用域。似乎numberOfPages()，它存在于控制器$scope上并未被调用。与pageSize相同。我该怎么做才能使用不同的数据集将这个1指令用于我的所有应用程序？

HTML

<div id="active-backups" class="backup-table-wrap">
            <h3>Active Backups</h3>
            <table id="active-backups-table" class="backup-table">
                <thead>
                    <tr>
                        <th>Customer</th>
                        <th>Last Archived</th>
                        <th>Archive Size (GB)</th>
                        <th>Mailboxes</th>
                        <th>Items</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody ng-if="isLoading">
                    <tr load-spinner></tr>
                </tbody>

                <tbody  ng-if="!isLoading">
                    <tr ng-repeat="active in data.ActiveBackups | paginate:ActiveCurrentPage*pageSize | limitTo:pageSize">
                        <td><a ui-sref="order.overview({ orderId: active.ServiceId })" ng-click="select(active)">{{ active.Customer }}</a></td>
                        <td>{{ active.LastArchived }}</td>
                        <td>{{ active.ArchiveSizeGB | number:2 }}</td>
                        <td>{{ active.NumMailboxes }}</td>
                        <td>{{ active.ArchivedItems }}</td>
                        <td><input type="button" class="backup-restore-btn" value="Restore" /></td>
                    </tr>
                </tbody>
            </table>
            <div ng-if="!isLoading" pagination backup-type="active" current-page="ActiveCurrentPage" backup-list="data.ActiveBackups"></div>

        </div>


        <div id="inactive-backups" class="backup-table-wrap">
            <h3>Inactive Backups</h3>
            <table id="inactive-backups-table" class="backup-table">
                <thead>
                    <tr>
                        <th>Customer</th>
                        <th>Last Archived</th>
                        <th>Archive Size (GB)</th>
                        <th>Mailboxes</th>
                        <th>Items</th>
                        <th></th>
                    </tr>
                </thead>
                 <tbody ng-if="isLoading">
                    <tr load-spinner></tr>
                </tbody>

                <tbody  ng-if="!isLoading">
                    <tr ng-repeat="active in data.InactiveBackups | paginate:InactiveCurrentPage*pageSize | limitTo:pageSize">
                        <td><a href="#">{{ active.Customer }}</a></td>
                        <td>{{ active.LastArchived }}</td>
                        <td>{{ active.ArchiveSizeGB | number:2 }}</td>
                        <td>{{ active.NumMailboxes }}</td>
                        <td>{{ active.ArchivedItems }}</td>
                        <td><input type="button" class="backup-restore-btn" value="Restore" /></td>
                    </tr>
                </tbody>
            </table>
                <div ng-if="!isLoading" pagination backup-type="inactive" current-page="InactiveCurrentPage" backup-list="data.InactiveBackups"></div>


        </div>

Answer 1

那是因为你在你的指令上声明了一个隔离范围，这意味着它不会继承控制器的父$scope并在每次创建时创建一个新的。您可以保留隔离范围并在该范围内传递指令的其他要求，而不是依赖于通过继承从父控制器获取它，IMO这种方法更加清晰和明确。

 scope : {
           currentPage: '=',
           backupList: '=',
           numberOfPages: '&'
         },

并传递这样的函数：

<div ng-if="!isLoading" pagination backup-type="inactive" current-page="InactiveCurrentPage" backup-list="data.InactiveBackups" number-of-pages="numberOfPages()"></div>

Answer 2

我现在找到了一个工作，但我真的想弄清楚如何以正确的方式做到这一点。我所做的是将回调函数发送到指令，如下所示：

<div ng-if="!isLoading" pagination backup-type="active" on-change="onPageChange" backup-list="data.ActiveBackups"></div>

其中onPageChange是我的控制器$scope上的回拨函数。接下来，我将页面更改连接到每次更改页面时调用该回调函数

scope.nextPage = function () {

     scope.currentPage++;
     scope.onChange(scope.currentPage, attrs.backupType);

}

然后我在$scope上设置我的回调

$scope.onPageChange = function (newPage, type) {
            console.log(newPage);
            if (type == 'active') {
                $scope.ActiveCurrentPage = newPage;
            } else {
                $scope.InactiveCurrentPage = newPage;
            }
        }

这解决了我的问题，但感觉不像是＆＃34;正确＆＃34;方式。

角度指令使用相同的模型，但使用不同的数据

2 个答案: