AngularJs 指令directive之controller,link,compile
关于自定义指令的命名,你可以随便怎么起名字都行,官方是推荐用[命名空间-指令名称]这样的方式,像ng-controller。不过你可千万不要用 ng-前缀了,防止与系统自带的指令重名。另外一个需知道的地方,指令命名时用驼峰规则,使用时用-分割各单词。如:定义myDirective,使用时 像这样:<my-directive>。
这里列出directive的合法命名:
- ng:bind
- ng-bind
- ng_bind
- x-ng-bind
- data-ng-bind
app.directive('fractionNum',function(){ return { link : function(scope, elements, attrs, controller){ elements[0].onkeyup = function(){ if(isNaN(this.value) || this.value<1 || this.value>10){ this.style.borderColor = 'red'; } else{ this.style.borderColor = ''; } }; } }; });link的值是一个函数,用来定义指令的行为。从传入的参数中可以获取到当前元素,我们便可以拿当前元素开刀了。我在此处监听当前元素的keyup事件,获取元素的值,如果不是1~10之间的数字,则把输入框的边框颜色变为红色。这下这个指令就可以工作了。定义好的指令就可以在模板中使用了,使用方法如下:
分数:<input type="text" ng-model="question.fraction" fraction-num /><br />
相关推荐
youyouzouzou 2014-05-30
zhenghao 2014-05-30
lizean 2014-05-30
lizean 2013-12-20
夏小球 2017-09-20
Inuyasha 2017-05-27
xingdongfang 2019-11-10
zhenghao 2014-05-30
老卫的技术站 2018-10-09
Oranq 2017-03-22
LDN0 2014-07-02
CrazyDogWang 2017-09-10
zbwroom 2017-09-10
lujingjing 2019-06-28
CrazyDogWang 2016-06-07
lizean 2016-05-20
zhenghao 2016-05-17
youyouzouzou 2016-05-11