從angular-ui-bootstrap，我們可以看到一個合格的自定義指令，是可以做到高復用的。 問：那如何做到高復用？ 答： 把一些在不同場景使用中會變動的元素暴露出去，作為接口，把在各種場景都基本不會變動的邏輯寫在指令中；例如他的一個輪播圖：  ~~~ scope: { active: '=', interval: '=', noTransition: '=', noPause: '=', noWrap: '&' } ~~~ - 這里的active是輪播的元素； - interval，是輪播的時間間隔； - no-pause 是否暫停等等； 。。。。從這里我們可以看出，因為一個輪播圖在不同場景會變動的元素，無非就是輪播時間間隔，輪播的當前元素，暫停等等。所以ui-bootstrap把這些元素暴露出去，與controller進行交互 而其他的一些邏輯，比如如何進行輪播，如何獲取上次輪播的元素之類的元素，在各個應用場景中并不會出現太大的變動，或者說，根本就不需要變動，所以ui-bootstrap就沒有把這些接口暴露出去。 所以我們寫一個自定義指令，也應該應用這種思路 比如:我需要把一個彈出框封裝成一個自定義指令：  我需要考慮的在各種場景下會變動的元素： - 彈出框的位置 - 彈出框的內容 - 彈出框的背景顏色 - 彈出框的顯示 這樣我們就清楚，應該暴露出什么接口： ~~~ scope:{ isShow:'=', firstText:'=', lastText:'=', loadedStyle:'=' }, ~~~ 然后我們在html應用這個自定義指令的時候，就可以使用這些接口對上面的元素進行變動： ~~~ <hint is-show="vm.isShow" first-text="vm.hintText" last-text="vm.hintText2" loaded-style="vm.loadedStyle"> </hint> ~~~ 再說說為什么ui-bootstrap為什么要以bootstrap為基礎。 因為ui-bootstrap其實也就是一堆自定義指令，自定義指令并沒有樣式，所以我們引用自定義指令的時候，還需要在css寫上自定義指令的html樣式，出于簡便而且美觀，ui-bootstrap就使用bootstrap作為他的html樣式，這樣就可以省去我們自己還要再引用樣式的步驟。 之前因為至把日歷封裝成自定義指令，導致和controller要進行交互的元素太多，而且交互的數據，并不是在各個場景下會變動的元素，這樣做其實是非常不好的，而且這個指令也無法復用，正確的做法應該是把簽到按鈕和日歷封裝在一起形成一個自定義指令，然后把簽到按鈕的樣式作為暴露的元素，其他的邏輯應該在指令里面完成