angularjs - 使用相同模型但不同数据的 Angular 指令

Question

我正在尝试创建一个自定义分页指令，该指令存在于我的页面上的两个位置。我有 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>

这是另一张 table 的另一个

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

问题是我的分页指令似乎无法访问 Controller 的父范围。看起来 Controller $scope 上存在的 numberOfPages() 没有被调用。 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

这是因为您在指令上声明了一个独立作用域，这意味着它不会继承 Controller 的父级 $scope 并在每次创建时创建一个新的作用域。您可以保留隔离范围并在该范围内传递指令的其他要求，而不是依赖于通过继承从父 Controller 获取它，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>