大家好鞋拟，我是IT修真院深圳分院第02期學(xué)員骂维，一枚正直善良的web程序員。
今天給大家分享一下贺纲，修真院官網(wǎng)js任務(wù)9航闺，深度思考中的知識點——怎么將分頁封裝成指令？
1.背景介紹
對于指令，可以把它簡單的理解成在特定DOM元素上運行的函數(shù)潦刃，指令可以擴展這個元素的功能侮措。 例如，一些原生的指令如 ng-disabled 乖杠， ng-if 萝毛，ng-repeat ，ng-click 等滑黔。ng-click可以讓一個元素能夠監(jiān)聽click事件笆包，并在接收到事件的時候執(zhí)行AngularJS表 達式。正是指令使得AngularJS這個框架變得強大略荡，并且在AngularJs我們可以自己通過directive來創(chuàng)造新的指令庵佣。
2.知識剖析
當(dāng)在我們的項目中需要實現(xiàn)一些功能，比如汛兜，時間篩選巴粪、分頁的功能，我們最先想到的可能是先去網(wǎng)上找找看粥谬，有沒有相應(yīng)的插件可以給我們直接拿來使用肛根。但是插件代碼一般十分復(fù)雜掸茅，無法定位bug進行修改鄙麦，也無法保證修改后不會出現(xiàn)別的bug茂翔，用起來可能不太順手筋夏。像一些實現(xiàn)簡單功能的插件透葛，我們可以利用AngularJS中的directive自己寫一個指令秽梅，進行封裝颇玷，也可以方便以后重復(fù)使用锌云。
3.常見問題
怎么將分頁封裝成指令感耙？
4.解決方案
先了解一下DIRECTIVE自定義指令中都可以設(shè)置哪些選項褂乍？
app.directive('pagination', function() {
return {
restrict: String,
priority: Number,
terminal: Boolean，
templateUrl: String,
replace: Boolean or String,
scope: Boolean or Object,
transclude: Boolean,
controller: String or function() { ... },
controllerAs: String,
require: String,
link: function() { ... },
compile: function() { ... }
});5.編碼實戰(zhàn)
6.擴展思考
分頁功能還可以怎么做即硼？
7.更多討論
1.還可以用directive自定義指令封裝哪些插件
2.directive自定義指令中的scope作用和注意點
課后提問：
問：如果在一個頁面當(dāng)中使用2個同一分頁插件逃片，怎么避免沖突?
答：重新封裝，定義不同的數(shù)據(jù)模型只酥，如$scope.showPage1 褥实、$scope.maxPage1；$scope.showPage2层皱、$scope.maxPage2;在不同地方引用不同數(shù)據(jù)模型性锭，避免沖突。
8.參考文獻
參考一：AngularJS權(quán)威教程
9.視頻資料
今天的分享就到這里啦叫胖，歡迎大家點贊草冈、轉(zhuǎn)發(fā)、留言、拍磚~
下期不見不散~
