Articles tagged with: page

首先需要使用指令(directives)，然后共享socpe对象即可，html里输入：

<div class="pages">
    <page-html page="{{pageData.page}}" pageTotal="{{pageData.pageTotle}}" method="read"></page-html>
</div>

directives文件中创建pageHtml指令：

.directive("pageHtml",function () {
    return{
        restrict:'EA',
        replace:true,
        link:function (scope,ele,attr,ctrl) {
            scope.initPage = function(){
                scope.pages = [];
                if(typeof scope.pageData == "object" && scope.pageData.pageTotle > 1){
                    var i = scope.pageData.page;
                    i -= 2;
                    if(i < 1){
                        i = 1
                    }
                    for(;i <= scope.pageData.pageTotle; i++){
                        scope.pages.push(i)
                        if(scope.pages.length >= 5){
                            break;
                        }
                    }
                }
            }
            scope.initPage()
        },
        controller: function ($scope, $element, $attrs) {

            var _method = $attrs.method
            $scope.selectPage = function(page){
                if(page == "pre"){
                    if($scope.pageData.page > 1){
                        $scope.pageData.page--;
                        page = $scope.pageData.page;
                    }
                }else if(page == "next"){
                    if($scope.pageData.page < $scope.pageData.pageTotle){
                        $scope.pageData.page++;
                        page = $scope.pageData.page;
                    }
                }else{
                    $scope.pageData.page = page;
                }
                if($scope.pageData.page > 0 && $scope.pageData.page <= $scope.pageData.pageTotle){
                    $scope.initPage()
                    if(typeof _method  == "string"){
                        $scope[_method](page);
                    }else{
                        $scope.read(page);
                    }
                }
            }
        },
        template: '<nav ng-if="pageData.pageTotle > 1"><ul class="pagination">' +
        '<li><a class="disabled cursor-pointer" ng-click="selectPage(\'pre\')"><span aria-hidden="true">上一页</span></a></li>' +
        '<li ng-repeat="(i,n) in pages track by i" ng-click="selectPage(n)" class="cursor-pointer {{n == pageData.page ? \'active\': \'\'}}"><a>{{n}}</a></li>'+
        '<li><a class="Previous cursor-pointer" ng-click="selectPage(\'next\')"><span aria-hidden="true">下一页</span></a></li>' +
        '</ul></nav>'
    }
})

一个简单的分页效果就出来了。