準備工作：
（1）一如既往的我還是使用了requireJS進行js代碼的編譯
（2）必須引入angualrJS , ui-bootstrap-tpls-1.3.2.js , bootstrap.css....
首先拋出幾個問題：
a）:何時回用到分頁 (當后端返回的數據過多，一頁裝不滿時，我們必須要采取分頁的效果，給用戶良好的視覺效果)
b）:分頁一般要傳遞哪些數據 （總的數據數量，每頁固定顯示多少條數據，當點擊分頁時候返回當前的頁碼.......這三條是必須的）
第一步：先完成指令的封裝
我會在 js/directives/pagedir 此文件下完成指令的編寫
pagedir.html(指令頁面模板)
<div>
<button class="btn btn-info" type="button" ng-click="setPage(3)">Set current page to: 3</button>
<h7><code>rotate</code> defaulted to <code>true</code> and <code>force-ellipses</code> set to <code>true</code>:</h7>
<uib-pagination class="pagination-sm" 分頁函數="" ng-change="pageChanged()" 是否將當前頁顯示在中間="" rotate="true" 是否顯示首頁，和末頁的數字="" boundary-link-numbers="true" 是否顯示“.....”這幾個點="" force-ellipses="true" 顯示頁碼的頁碼tabs數量（不包含首頁，末頁）="" max-size="maxSize" 當前頁="" ng-model="bigCurrentPage" 每頁顯示的數據條數="" ="" items-per-page="pageSize" 總的數據記錄數="" total-items="bigTotalItems" =""> </uib-pagination>
<pre>Page: {{bigCurrentPage}}/{{numPages}}</pre>
</div>
pagedir.js（指令的操作js）
define(['app'],function(myapp){
myapp.directive("pagedir",[function(){
return{
templateUrl:"js/directives/pagedir/pagedir.html",//指令的模板頁面
restrict:'AE',
scope:{
data:'=', //用于獲取頁面控制器傳回來的數據（例如：總得記錄數，每頁顯示的數量等....）
currentpage:'=', //返回當前頁給頁面控制器
},
link:function(s,el,attrs){
},
controller:['$scope','$log',function($scope,$log){
$scope.bigTotalItems=$scope.data.bigTotalItems;
$scope.pageSize=$scope.data.pageSize;
$scope.bigCurrentPage=$scope.data.bigCurrentPage;
$scope.numPages=$scope.data.numPages;
$scope.maxSize=$scope.data.maxSize;
$scope.setPage = function (pageNo) {//用于設置回到指定頁
$scope.bigCurrentPage = pageNo;
console.log( $scope.bigCurrentPage);
};
$scope.pageChanged = function() {//用于返回當前頁
$log.log('Page changed to: ' + $scope.bigCurrentPage);
console.log($scope.bigCurrentPage);
$scope.currentpage=$scope.bigCurrentPage;//賦值，準備傳給頁面控制器，用于接口的取值
};
}],
}
}]);
});
第二步：明確使用地方
我打算在test.html頁面上使用分頁的功能（你可以在各個有多條數據現實的頁面使用分頁）
test.html
<p>this is page dir</p> <pagedir ng-click="getCurPage()" currentpage="currentpage" data="dataPage"> </pagedir>
對應的控制器：idea_test_ctrl
define(['app','directives/pagedir/pagedir'],function(myapp){
myapp.controller("idea_test_ctrl",['$scope',function($scope){
$scope.dataPage={ //用于分頁的數據
maxSize:5, //顯示五個頁碼按鈕（不包括第一條，和最后一條）
bigTotalItems:50, //總的記錄數（一般來源于接口的返回數據）
bigCurrentPage:1, //當前頁碼
pageSize:5, //每頁顯示的數據數量
numPages:50/5, //共有多少頁
};
$scope.getCurPage=function(){
console.log($scope.currentpage,"========================================");
//接下來的調用后臺接口，返回數據
//...........................一系列的后續操作
}
}]);
});
最終頁面的顯示效果
順便給出路由的配置
.state('home.ideas.test', {
url: '/test',
views: {
"part": {
templateUrl: 'tpls/ideas/test.html',
controller:"idea_test_ctrl"
}
}
})
總結一下：封裝此指令的難點(假如你已經了解怎么使用angualr的指令了)
1>：如何雙向傳值的問題（在頁面控制器設置的數值傳遞到分頁模塊控制器，以及每次點擊分頁怎么樣將頁碼傳回頁面控制器用于調用接口的傳參）
一點分享：link鏈接方法與指令的controller有啥關系（貌似都可以進行數據的操作） 指令的控制器和link函數可以進行互換?？刂破髦饕怯脕硖峁┛稍谥噶铋g復用的行為，但鏈接函數只能在當前內部指令中定義行為，且無法在指令間復用.link函數可以將指令互相隔離開來，而controller則定義可復用的行為。 （指令是可以嵌套的，還記得我們指令中有一個require的屬性嗎？）
好了，以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
