为什么 <paginator> 不绑定到 $scope？

Question

示例

所以下面的模板被加载为模态的内容。我可以阅读我设置的范围，但我无法理解我没有将<pagination> 绑定到totalItems。

模板.html

<div class="modal-header">
    <h3 class="modal-title">{{$parent.helpName}}</h3>
</div>
<div class="modal-body">
    Page {{currentPage }} of {{totalItems}}
    <pagination boundary-links="true" total-items="totalItems" ng-model="currentPage" class="pagination-sm" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></pagination>
    <div data-ng-show="page.pageNumber == currentPage" data-ng-repeat="page in $parent.helpPages">
        <ul tabset typeof="pills">
            <li tab data-ng-repeat="subPage in page.pills" data-heading="{{subPage.tabTitle}}">
                <div class="panel panel-default">
                    <div class="panel-body" style="overflow:auto;" data-ng-bind-html="subPage.pillDiv">
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>

Controller.js

app.directive('myDirective', function factory (){
    return {
        restrict:   'A',    // IE8 doesn't support 'custom tags'
        template:'<a ng-hide="!overlayName" class="btn btn-primary" ng-click="showHelp(overlayName)">Need Help <i class="fa fa-question-circle"></i></a>',
        controller: function overlayCtrl ($scope, $modal, data) {
            // [A]  overlay control properties
            $scope.helpModal = null;
            $scope.overlayName = __hasOverlay($scope.$parent.step.shortDesc); // Right now, look up the overlay by the shortDesc
            if ($scope.overlayName) $scope.overlayName = $scope.overlayName.help;

            // [B]  overlay control methods
            $scope.showHelp = function (name) {

                data.getHelpOverlay(name).then(function (helpContent) {
                    $scope.helpPages = helpContent;
                    $scope.helpName = name;
                    $scope.helpModal = $modal.open({
                        scope:$scope, controller:function ($scope, $sce) {
                            // the scope I'd expect <pagination>'s model to bound on
                            $scope.currentPage = 1;
                            $scope.totalItems = $scope.$parent.helpPages.length;
                        // other code...
                        },
                        templateUrl:'app/steps/templates/helpOverlay.html',
                        size:'lg'
                    });
                });
            }
        }
    };
});

什么给了？！

Answer 1

编辑

我认为您误解了 total-items 是要在分页控件中显示的总页数。 total-items 是 ALL 页面中的项目总数。 （我想我应该更仔细地查看您的问题，但问题不在于您无法访问 totalItems，而是分页在您期望它显示 4 时仅显示一页）。

items-per-page 的默认值为 10。因此，如果您只传入 4 个项目，它只会显示 1 页。

Plunker

<pagination boundary-links="true" total-items="totalItems" ng-model="currentPage" class="pagination-sm" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;" items-per-page="1"></pagination>