準(zhǔn)備工作：
為張北等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及張北網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、張北網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！
（1）一如既往的我還是使用了requireJS進(jìn)行js代碼的編譯
（2）必須引入angualrJS , ui-bootstrap-tpls-1.3.2.js , bootstrap.css....
首先拋出幾個(gè)問(wèn)題：
a）:何時(shí)回用到分頁(yè) (當(dāng)后端返回的數(shù)據(jù)過(guò)多，一頁(yè)裝不滿時(shí)，我們必須要采取分頁(yè)的效果，給用戶良好的視覺(jué)效果)
b）:分頁(yè)一般要傳遞哪些數(shù)據(jù) （總的數(shù)據(jù)數(shù)量，每頁(yè)固定顯示多少條數(shù)據(jù)，當(dāng)點(diǎn)擊分頁(yè)時(shí)候返回當(dāng)前的頁(yè)碼.......這三條是必須的）
第一步：先完成指令的封裝
我會(huì)在 js/directives/pagedir 此文件下完成指令的編寫(xiě)
pagedir.html(指令頁(yè)面模板)
rotatedefaulted totrueandforce-ellipsesset totrue:Page: {{bigCurrentPage}}/{{numPages}}
pagedir.js（指令的操作js）
重慶分公司
重慶分公司
define(['app'],function(myapp){
myapp.directive("pagedir",[function(){
return{
templateUrl:"js/directives/pagedir/pagedir.html",//指令的模板頁(yè)面
restrict:'AE',
scope:{
data:'=', //用于獲取頁(yè)面控制器傳回來(lái)的數(shù)據(jù)（例如：總得記錄數(shù)，每頁(yè)顯示的數(shù)量等....）
currentpage:'=', //返回當(dāng)前頁(yè)給頁(yè)面控制器
},
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) {//用于設(shè)置回到指定頁(yè)
$scope.bigCurrentPage = pageNo;
console.log( $scope.bigCurrentPage);
};
$scope.pageChanged = function() {//用于返回當(dāng)前頁(yè)
$log.log('Page changed to: ' + $scope.bigCurrentPage);
console.log($scope.bigCurrentPage);
$scope.currentpage=$scope.bigCurrentPage;//賦值，準(zhǔn)備傳給頁(yè)面控制器，用于接口的取值
};
}],
}
}]);
}); 第二步：明確使用地方
我打算在test.html頁(yè)面上使用分頁(yè)的功能（你可以在各個(gè)有多條數(shù)據(jù)現(xiàn)實(shí)的頁(yè)面使用分頁(yè)）
test.html
this is page dir
對(duì)應(yīng)的控制器：idea_test_ctrl
define(['app','directives/pagedir/pagedir'],function(myapp){
myapp.controller("idea_test_ctrl",['$scope',function($scope){
$scope.dataPage={ //用于分頁(yè)的數(shù)據(jù)
maxSize:5, //顯示五個(gè)頁(yè)碼按鈕（不包括第一條，和最后一條）
bigTotalItems:50, //總的記錄數(shù)（一般來(lái)源于接口的返回?cái)?shù)據(jù)）
bigCurrentPage:1, //當(dāng)前頁(yè)碼
pageSize:5, //每頁(yè)顯示的數(shù)據(jù)數(shù)量
numPages:50/5, //共有多少頁(yè)
};
$scope.getCurPage=function(){
console.log($scope.currentpage,"========================================");
//接下來(lái)的調(diào)用后臺(tái)接口，返回?cái)?shù)據(jù)
//...........................一系列的后續(xù)操作
}
}]);
}); 最終頁(yè)面的顯示效果
順便給出路由的配置
.state('home.ideas.test', {
url: '/test',
views: {
"part": {
templateUrl: 'tpls/ideas/test.html',
controller:"idea_test_ctrl"
}
}
}) 總結(jié)一下：封裝此指令的難點(diǎn)(假如你已經(jīng)了解怎么使用angualr的指令了)
1>：如何雙向傳值的問(wèn)題（在頁(yè)面控制器設(shè)置的數(shù)值傳遞到分頁(yè)模塊控制器，以及每次點(diǎn)擊分頁(yè)怎么樣將頁(yè)碼傳回頁(yè)面控制器用于調(diào)用接口的傳參）
一點(diǎn)分享：link鏈接方法與指令的controller有啥關(guān)系（貌似都可以進(jìn)行數(shù)據(jù)的操作） 指令的控制器和link函數(shù)可以進(jìn)行互換?？刂破髦饕怯脕?lái)提供可在指令間復(fù)用的行為，但鏈接函數(shù)只能在當(dāng)前內(nèi)部指令中定義行為，且無(wú)法在指令間復(fù)用.link函數(shù)可以將指令互相隔離開(kāi)來(lái)，而controller則定義可復(fù)用的行為。 （指令是可以嵌套的，還記得我們指令中有一個(gè)require的屬性嗎？）
好了，以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)創(chuàng)新互聯(lián)的支持。
