自定义 AngularJS 指令

Angular 指令主要是对 html 的封装复用扩展。封装复用的一个很典型的场景就是多页面相同的底部，我们完全可以设定指令 template 属性内部嵌入代码模版，然后在每个页面中调用。类似后端语言中的 include 方法。更多时候可复用的 html 代码块作为一个模版视图，然后用 ng-include 或者是 templateUrl 来动态加载，这已经不局限于指令本身了。相比内部嵌入的方式，动态加载模板视图至少会多一次请求。

当然仅仅封装一些代码块是远远不够的，封装虽然实现了代码复用，没有实现组件的多态性。典型的组件是有输入输出的，我们还要为指令提供外部输入接口以实现不同的输出。这就要用到组件的自定义属性方法。

假设我们的需求就是要在后台实现网站换肤管理功能。当用户选择一个颜色主题时，会用当前选定主题渲染页面，并把它保存到服务器端，当用户再次进入页面时，会从服务器端取得已设定的颜色值并渲染页面。很明显，用 Angular 双向绑定单选框的 value 属性可以快速实现这个功能。问题在于不同的浏览器下单选框呈现出不同的外观。为了实现不同浏览器下都有“高颜值”，我们需要自定义一个单选框组指令并自定义属性。

实现方式

目前我能想到这个指令有实现两种方式。

一种方法就是在指令的 link 函数中使用 jqlite 对 DOM 进行操作，比如说初始选中样式或者点击鼠标更新选中样式。

从代码可以看出该方法充分了利用现有的 html 代码块，向下兼容性比较好。但直接操作 DOM 元素，比较底层，而且要手动调用一些不常用的方法，比如说 $watch 和 $apply 方法来实现双向数据绑定功能。该方法依赖 span 标签，耦合度高，不够灵活。如果赋值时直接使用 span 的 class 属性会返回颜色加 active，得拆分字符串才能得到想要的我们结果。为取得颜色值我们不得不额外设定一个 value 属性，导致代码量大，难以扩展和维护。该方法很 jQuery，尽量少用。

另一种方式是用指令 template 设定内部嵌入代码模版，然后在模板当中使用 Angular 内置指令完成相同的行为。这种方法充分利用了 Angular 的内置指令，比如 ng-repeat、ng-class`、ng-click，还有双大括号。很少量代码实现了相同的功能。基于数据模型，通过设定 data` 属性可动态生成 UI，封闭性扩展性更强。该方法很 Angular，鼓励使用。