[MAN铁人赛]Day 09:AngularJS – Directives

摘要:[MAN铁人赛]Day 09:AngularJS - Directives


A -> AngularJS - Directives

前言

今天要谈到的是Directives,这相当于AngularJS精髓的东西,透过Directives我们可以不必像以前直接操作dom对象去控制画面的产生,只要两边系结后直接修改来源即可改变成现的样子。

Directives

  • n.命令; <美>命令,命令; 方针
  • adj.指示性的,指导性的,管理的

上面字面上的翻译,而在AngularJS里就如同他字面上的意思,Directives是一种新的方式在DOM编译时与Directives对应,而对应到的HTML和执行时的程序,可直接对HTML作出改变。这允许Directives 注册新的behavior,或者改造DOM的内容。

上面这张图帮我们说明了在AngularJS各技术的架构关联情况(右下角的Factory之后会介绍道),而Directives主要就是帮我们做页面客制呈现的一种two-way binding的方式

范例

JS Bin

这边你可以输入你文后就一起修改下面的内容,而这是一般的two-way binding

这边我们再看如何透过Directives一行程序就帮我们做出下拉选项

JS Bin

上面这个范例,我们只透过一行ngRepeat的方式来产生select里面的option

  

而且只要增加$scope.names里面数组的内容就可以直接对下拉的选项作出对应的改变,是不是非常方便阿。

其他详细命令说明请参考官网Directive

结语

Directives使用非常简单,而透过了解Directives就可以做好呈现上的一些调配,让我们可以直接透过变量修改就可以达到页面呈现的修正,Day-9 over!



如果觉得文章还不错麻烦请在文章最上面给予推荐,你的支持是小弟继续努力产出的动力!