大家好滥玷,我是IT修真院武漢分院第5期的學員朱英杰氏身,一枚正直純潔善良的WEB前端程序員。
1.背景介紹
指令
指令惑畴,我們可以將它簡單的理解成為在特定dom元素上運行的函數(shù)蛋欣,指令可以擴展這個元素的功能。
angular有很多內置的指令供我們使用桨菜,例如豁状,ng-href;ng-src;ng-class,等一系列的指令捉偏。但隨著項目的開發(fā)倒得,
內置的指令,已經無法滿足我們的需求夭禽。所以霞掺,我們需要自定義一些指令。比如讹躯,分頁就是我們前端項目開發(fā)中經常碰到的功能菩彬。
2.知識剖析
自定義指令
首先缠劝,我們需要了自定義指令有哪些屬性
app.directive('pagination', function() {
return {
? ? ?restrict: String,//可選參數(shù) E(元素) A(屬性) C(類名)M(注釋)
? ? ?terminal: Boolean,//這個參數(shù)是告訴angular停止運行當前的元素上比本指令優(yōu)先級低的指令骗灶。但同時當前的指令優(yōu)先級相同的指令還是會被執(zhí)行
? ? ? templateUrl: String,
? ? ? ?replace: Boolean or String,//如果設置了這個參數(shù)惨恭,值必須為true,因為默認值為false耙旦。默認值意味著模板會被當作子元素插入到調用此指令的元素內部
? ? ? scope: Boolean or Object,
? ? ? ?transclude: Boolean,
? ? ?controller: String or function() { ... },
? ? ?controllerAs: String,
? ? ?require: String, //可以設置成為字符串或數(shù)組
? ? ?link: function() { ... },
? ? ?compile: function() { ... }
});
3.常見問題
如何將分頁封裝成指令脱羡?
4.解決方案
5.編碼實戰(zhàn)
6.擴展思考
如果不寫成指令了?
7.參考文獻
angular權威教程
Angular簡易分頁設計(一):基本功能實現(xiàn)
Angular簡易分頁設計(二):封裝成指令
8.更多討論
1免都、用directive自定義指令封裝過哪些插件锉罐,并碰到了什么問題
提問
1、css能不能封裝進指令
2绕娘、如何引入html模板
3脓规、指令之間怎么通信
指令之間通信,跟控制器間的通信差不多险领,無非是也是幾種方法:
1侨舆、通過指令自身參數(shù)
2、基于event傳播的方式
3舷暮、service的方式