Angular指令实例

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,鼓励使用。

github地址:https://github.com/szriafan/angular-directive-demo

发表评论