angular中注入依賴(分頁功能)。。。

js部分：

(function () {
    'use strict';
    myapp.config(function($controllerProvider) {
    $controllerProvider.register('achievementPage', {
        deps: [
            "style.css"
        ],
        init: function (app) {
            app.compileProvider.directive('achievementPage', [function () {
                return {
                    restrict: 'AE',
                    replace: true,
                    templateUrl: "template.html",
                    scope: {
                        getList: "=?",
                        pages: "=?"
                    },
                    link: function ($scope, element, attrs) {

                        var coverOption = {
                                total: 0,
                                perPage: 10,
                                currentPage: 1,
                                maxSize: 5,
                                list: [5, 10, 20, 30],
                            },
                            interfaceOption = {
                                reset: function (get) {
                                    this.perPage = 10;
                                    this.currentPage = 1;
                                    get && this.get();
                                },
                                switchPerPage: function (perPage) {
                                    if (this.perPage == perPage) return;
                                    this.perPage = perPage;
                                    this.currentPage = 1;
                                    this.get();
                                },
                                change: function (page) {
                                    this.get();
                                },
                                get: function () {
                                    angular.isFunction($scope.getList) && $scope.getList({
                                        limit: this.perPage,
                                        offset: (this.currentPage - 1) * this.perPage,
                                        page: this.currentPage
                                    });
                                }
                            };

                        if (!$scope.pages) $scope.pages = {};
                        angular.extend($scope.pages, coverOption, $scope.pages, interfaceOption);
                    }
                };
            }]);
        }
    });
})
}());

html部分：

<div class="achievement-page-directive clearfix">
    <ul class="pull-right" pagination
        boundary-links="true"
        total-items="pages.total"
        items-per-page="pages.perPage"
        ng-model="pages.currentPage"
        max-size="pages.maxSize"
        previous-text="上一頁"
        next-text="下一頁"
        first-text="第一頁"
        last-text="最後一頁"
        rotate="false"
        ng-change="pages.change(pages.currentPage)">
    </ul>
    <div class="dropup pull-right item">
        <div class="dropdown-toggle cloud-pointer" data-toggle="dropdown" aria-haspopup="true"
             aria-expanded="false">
            每頁顯示{{pages.perPage}}條數據 <span class="caret"></span>
        </div>
        <ul class="dropdown-menu">
            <li><a href="javascript:void(0);" ng-repeat="num in pages.list" ng-click="pages.switchPerPage(num)">每頁顯示{{num}}條數據</a>
            </li>
        </ul>
    </div>
    <div class="item pull-right">共{{pages.total}}條數據</div>
</div>

css部分：

.achievement-page-directive .item {
    margin-top: 26px;
    margin-right: 15px;
}
.achievement-page-directive .dropup {
    cursor: pointer;
}
.achievement-page-directive .dropup .dropdown-toggle:hover {
    opacity: .8;
}

 最終結果：