因此,下面的模板被加载为模态的内容。我可以阅读我设定的范围,但我无法理解我是如何将<pagination>
绑定到totalItems
的。
<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="‹" next-text="›" first-text="«" last-text="»"></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>
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'
});
});
}
}
};
});
答案 0 :(得分:2)
修改强>
我认为您误解了total-items是要在分页控件中显示的总页数。总项数是所有页面中的项目总数。 (猜猜我应该更仔细地查看你的问题,但问题不在于你无法访问totalItems,而是当你希望它显示4时,分页只显示一个页面。) / p>
每页商品的默认值为10.因此,如果您只传入4个商品,则只会显示1个页面。
MetroAnimatedSingleRowTabControl