为什么<paginator>没有绑定到$ scope?

时间:2015-05-30 14:45:04

标签: javascript angularjs pagination angular-ui-bootstrap

实施例

因此,下面的模板被加载为模态的内容。我可以阅读我设定的范围,但我无法理解我是如何将<pagination>绑定到totalItems的。

example output

Template.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'
                    });
                });
            }
        }
    };
});

给出了什么?!

1 个答案:

答案 0 :(得分:2)

修改

我认为您误解了total-items是要在分页控件中显示的总页数。总项数是所有页面中的项目总数。 (猜猜我应该更仔细地查看你的问题,但问题不在于你无法访问totalItems,而是当你希望它显示4时,分页只显示一个页面。) / p>

每页商品的默认值为10.因此,如果您只传入4个商品,则只会显示1个页面。

Plunker

MetroAnimatedSingleRowTabControl