angularjs使用directive實現分頁組件

閒來沒事，分享下項目中本身寫的分頁組件。來不及了，直接上車。

效果：

輸入框可任意輸入，並會自動提交到該頁

 

 依賴項：

fontawesome，bootstrap

html:

<ul class="page clearfix">
    <li ng-hide="currentPage <= 1">
        <a href="" ng-click="firstPage()">
            <i class="fa fa-step-backward"></i>
        </a>
        <a href="" ng-click="prePage()">
            <i class="fa fa-play fa-flip-horizontal"></i>
        </a>
    </li>
    <li>
        <span>頁碼</span>
        <input type="text" ng-model="currentPage">/
        <span ng-bind="totalPage"></span>
    </li>
    <li ng-hide="currentPage >= totalPage">
        <a href="" ng-click="nextPage()">
            <i class="fa fa-play"></i>
        </a>
        <a href="" ng-click="lastPage()">
            <i class="fa fa-step-forward"></i>
        </a>
    </li>
</ul>

css:

/* 分頁 */
.page {
    margin: 15px 0;
    padding: 0;
    float: right;
}
.page li {
    list-style: none;
    float: left;
    height: 30px;
    line-height: 30px;
}
.page li input {
    padding: 3px 5px;
    height: 100%;
    width: 50px;
    border: none;
    background-color: #EAEEF1;
    text-align: center;
    margin-right: 10px;
}
.page li span {
    margin-right: 15px;
}
.page li a {
    text-decoration: none;
    outline: none;
    margin-right: 15px;
}

directive:

App.directive('paging', function() { // 分頁
    return {
        restrict: 'A',
        replace: true,
        scope: {
            totalPage: '=totalPage',
            currentPage: '=currentPage',
            getData: '&getData'
        },
        templateUrl: 'app/views/partials/paging.html',
        controller: function($scope) {

            $scope.firstPage = function() { $scope.currentPage = 1; }
            $scope.lastPage = function() { $scope.currentPage = $scope.totalPage; }
            $scope.prePage = function() { $scope.currentPage--; }
            $scope.nextPage = function() { $scope.currentPage++; }

            $scope.$watch('currentPage', function(newVal, oldVal) {
                if(newVal != oldVal && newVal) $scope.getData();
            })
        }
    };
});

參數：

totalPage: 總頁數, currentPage: 當前頁, getData: 點擊分頁所觸發的函數

用法：

controller：

$scope.current_page = 1; // 當前頁
$scope.getData = function() {
   $scope.param.page = $scope.current_page;
   ConnectApi.start('post', 'index/student/getschoolclasslist', $scope.param).then(function(response) { // 這個ConnectApi 你大可沒必要關心，這是我封裝的http函數
        var data = ConnectApi.data({ res: response, _index: index });
        $scope.data = data.data;
        $scope.totalpage = data.data.total_page; // 服務器端返回的總頁數
   }
}
$scope.getData(); // 獲取數據的函數

 

html:

<div paging total-page="totalpage" current-page="current_page" get-data="getData()"></div>