anjular分页组件tm-pagination的使用

原组件地址：https://github.com/miaoyaoyao/AngularJs-UI

(1)直接从git上clone下来的demo无法正常显示，后来重新到在线的demo上拷贝了template，并且修改为使用bootstrap4：

template:'<div class="p-2 page-list d-flex align-items-center justify-content-start flex-wrap">' +
'<ul class="pagination flex-wrap" ng-show="conf.totalItems > 0">' +
'<li class="page-item" ng-class="{disabled: conf.currentPage == 1}" ng-click="prevPage()"><span class="page-link">&laquo;上一页</span></li>' +
'<li class="page-item" ng-repeat="item in pageList track by $index" ng-class="{active: item == conf.currentPage, separate: item == \'...\'}" ' +
'ng-click="changeCurrentPage(item)">' +
'<span class="page-link">{{ item }}</span>' +
'</li>' +
'<li class="page-item" ng-class="{disabled: conf.currentPage == conf.numberOfPages}" ng-click="nextPage()"><span class="page-link">下一页&raquo;</span></li>' +
'</ul>' +
'<div class="ml-2 d-flex align-items-center page-total" ng-show="conf.totalItems > 0">' +
'每页<select ng-model="conf.itemsPerPage" ng-options="option for option in conf.perPageOptions " ng-change="changeItemsPerPage()"></select>条' +'/共<strong>{{ conf.totalItems }}</strong>条&nbsp;' +
'第<input type="text" ng-model="jumpPageNum" />页 ' +'<button ng-click="jumpToPage()" class="ml-2 page-link">确认</button>'+
'</div>' +
'<div class="no-items" ng-show="conf.totalItems <= 0">暂无数据</div>' +
'</div>',

原来的代码中，跳转页面用的是ng-change，比如我要跳转到第10页，当输入1时还没输入0就自动跳转到第1页了，修改为添加button，点击button后跳转。

<button ng-click="jumpToPage()" class="ml-2 page-link">确认</button>
<!--点击后执行jumpToPage（）跳转函数。-->

(2)在我的项目中的应用,

            // 在变更分布的时候，重新获取数据条目
        var reGetProducts = function(){
            // 发送给后台的请求数据
            var postData = {
                currentPage: $scope.paginationConf.currentPage,
                itemsPerPage: $scope.paginationConf.itemsPerPage
            };

            $http.post('http://demo.miaoyueyue.com/php/demo/1/getProducts.php', postData).then(function(data){
                // 变更分页的总数
                $scope.paginationConf.totalItems = data.total;
                // 变更产品条目
                $scope.products = data.items;
            });
        };

        // 配置分页基本参数
        $scope.paginationConf = {
            currentPage: 1
        };

        // 通过$watch currentPage和itemperPage 当他们一变化的时候，重新获取数据条目
        $scope.$watch('paginationConf.currentPage + paginationConf.itemsPerPage', reGetProducts);

修改后的代码：https://gitee.com/jshaxclcc/tm-pagination