从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要进行交互的元素太多，而且交互的数据，并不是在各个场景下会变动的元素，这样做其实是非常不好的，而且这个指令也无法复用，正确的做法应该是把签到按钮和日历封装在一起形成一个自定义指令，然后把签到按钮的样式作为暴露的元素，其他的逻辑应该在指令里面完成