javascript - 为什么 没有绑定(bind)到 $scope？

Question

示例

因此，以下模板将作为模式的内容加载。我可以读取我设置的范围，但我无法理解我如何没有绑定(bind) <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是分页控件中要显示的总页数。总项目数是所有页面中的项目总数。 (我想我应该更仔细地看看你的问题，但问题不在于你无法访问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>