angularjs之directive实例

于 2017-01-19 09:10:23 发布
阅读量270 收藏
点赞数 1
分类专栏： AngularJS学习 文章标签： angularJS directive html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_26611019/article/details/54612496
版权
Angularjs作为强大的web前端开发框架，在其诸多的优势中directive不得不提。当你在开发中需要使用自定义的控件或者属性时，directive就显得特别有用，
下面结合自己的开发经验来谈谈directive的使用

1、定义
以自定的全键盘为例：
myApp.directive("allKeypad",function(){
return{
restrict:'AE',
scope:{
touchstart:'&',
clear:'@',
ok:'@',
lowerkeypad:'=',
upkeypad:'='
},
templateUrl:'main/screen/custom/allkeypads.html',
}
});

其中
allkeypad：自定义directive的名称，可随意取，建议遵循驼峰法则。
restrict：该directive作为何种身份出现在代码中，E(元素) A(属性) C(样式) M(注解)
scope：传递的参数对象
'=':双向传值
'@':单项
'&':函数传递
templateUrl：自定义的布局文件路径

2、自定布局
allkeypads.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
.keybtn{
width: 8%;
margin-left:1%;
height: 90%;
font-size: 0.6rem;
float: left;
background-color:#fff;
border-color: #6B6B6B;
}
.keybtn:active{
width: 8%;
margin-left:1%;
height: 90%;
font-size: 0.6rem;
float: left;
color: black;
background-color:#AFD9D6;
}
.keybtn2{
width: 9%;
margin-left:1%;
height: 90%;
font-size: 0.6rem;
float: left;
background-color:#fff;
border-color: #6B6B6B;
}
.keybtn2:active{
width: 9%;
margin-left:1%;
height: 90%;
font-size: 0.6rem;
float: left;
color: black;
background-color:#AFD9D6;
}
</style>
</head>
<body>
<div style="width: 100%;height: 100%;background: #fff">
<!-- lower -->
<div ng-show="lowerkeypad" style="width:100%;height: 100%;padding: 1%;" rcc-touchstart="touchstart()">
<div style="width: 100%;height: 25%;">
<button id="1" class="btn  keybtn" >1</button>
<button id="2" class="btn  keybtn" >2</button>
<button id="3" class="btn  keybtn" >3</button>
<button id="4" class="btn  keybtn" >4</button>
<button id="5" class="btn  keybtn" >5</button>
<button id="6" class="btn  keybtn" >6</button>
<button id="7" class="btn  keybtn" >7</button>
<button id="8" class="btn  keybtn" >8</button>
<button id="9" class="btn  keybtn" >9</button>
<button id="0" class="btn  keybtn" >0</button>
<button id="correct" class="btn  keybtn" style="font-weight: border;"><-</button>
</div>
<div style="width: 100%;height: 25%;padding-left: 2%;padding-right: 2%;">
<button id="q" class="btn  keybtn2">q</button>
<button id="w" class="btn  keybtn2">w</button>
<button id="e" class="btn  keybtn2">e</button>
<button id="r" class="btn  keybtn2">r</button>
<button id="t" class="btn  keybtn2">t</button>
<button id="y" class="btn  keybtn2">y</button>
<button id="u" class="btn  keybtn2">u</button>
<button id="i" class="btn  keybtn2">i</button>
<button id="o" class="btn  keybtn2">o</button>
<button id="p" class="btn  keybtn2">p</button>
</div>
<div style="width: 100%;height: 25%;">
<button id="cap" class="btn  keybtn">cap</button>
<button id="a" class="btn  keybtn">a</button>
<button id="s" class="btn  keybtn">s</button>
<button id="d" class="btn  keybtn">d</button>
<button id="f" class="btn  keybtn">f</button>
<button id="g" class="btn  keybtn">g</button>
<button id="h" class="btn  keybtn">h</button>
<button id="j" class="btn  keybtn">j</button>
<button id="k" class="btn  keybtn">k</button>
<button id="l" class="btn  keybtn">l</button>
<button id="clear" class="btn  keybtn">{{clear}}</button>
</div>
<div style="width: 100%;height: 25%;">
<button id="*" class="btn  keybtn" style="width: 6%;">*</button>
<button id="?" class="btn  keybtn" style="width: 6%;">?</button>
<button id="z" class="btn  keybtn">z</button>
<button id="x" class="btn  keybtn">x</button>
<button id="c" class="btn  keybtn">c</button>
<button id="v" class="btn  keybtn">v</button>
<button id="b" class="btn  keybtn">b</button>
<button id="n" class="btn  keybtn">n</button>
<button id="m" class="btn  keybtn">m</button>
<button id="." class="btn  keybtn">.</button>
<button id="ok" class="btn  keybtn" style="width: 12%;">{{ok}}</button>
</div>
</div>

<!-- up -->
<div ng-show="upkeypad" style="width:100%;height: 100%;padding: 1%;" rcc-touchstart="touchstart()">
<div style="width: 100%;height: 25%;">
<button id="1" class="btn  keybtn" >1</button>
<button id="2" class="btn  keybtn" >2</button>
<button id="3" class="btn  keybtn" >3</button>
<button id="4" class="btn  keybtn" >4</button>
<button id="5" class="btn  keybtn" >5</button>
<button id="6" class="btn  keybtn" >6</button>
<button id="7" class="btn  keybtn" >7</button>
<button id="8" class="btn  keybtn" >8</button>
<button id="9" class="btn  keybtn" >9</button>
<button id="0" class="btn  keybtn" >0</button>
<button id="correct" class="btn  keybtn" style="font-weight: border;"><-</button>
</div>
<div style="width: 100%;height: 25%;padding-left: 2%;padding-right: 2%;">
<button id="Q" class="btn  keybtn2">Q</button>
<button id="W" class="btn  keybtn2">W</button>
<button id="E" class="btn  keybtn2">E</button>
<button id="R" class="btn  keybtn2">R</button>
<button id="T" class="btn  keybtn2">T</button>
<button id="Y" class="btn  keybtn2">Y</button>
<button id="U" class="btn  keybtn2">U</button>
<button id="I" class="btn  keybtn2">I</button>
<button id="O" class="btn  keybtn2">O</button>
<button id="P" class="btn  keybtn2">P</button>
</div>
<div style="width: 100%;height: 25%;">
<button id="CAP" class="btn  keybtn">CAP</button>
<button id="A" class="btn  keybtn">A</button>
<button id="S" class="btn  keybtn">S</button>
<button id="D" class="btn  keybtn">D</button>
<button id="F" class="btn  keybtn">F</button>
<button id="G" class="btn  keybtn">G</button>
<button id="H" class="btn  keybtn">H</button>
<button id="J" class="btn  keybtn">J</button>
<button id="K" class="btn  keybtn">K</button>
<button id="L" class="btn  keybtn">L</button>
<button id="clear" class="btn  keybtn">{{clear}}</button>
</div>
<div style="width: 100%;height: 25%;">
<button id="*" class="btn  keybtn" style="width: 6%;">*</button>
<button id="?" class="btn  keybtn" style="width: 6%;">?</button>
<button id="Z" class="btn  keybtn">Z</button>
<button id="X" class="btn  keybtn">X</button>
<button id="C" class="btn  keybtn">C</button>
<button id="V" class="btn  keybtn">V</button>
<button id="B" class="btn  keybtn">B</button>
<button id="N" class="btn  keybtn">N</button>
<button id="M" class="btn  keybtn">M</button>
<button id="." class="btn  keybtn">.</button>
<button id="ok" class="btn  keybtn" style="width: 12%;">{{ok}}</button>
</div>
</div>
</div>
</body>
</html>
3、使用示范
<div style="width: 100%;height: 100%;" ng-show="true">
<all-keypad  clear="{{clear}}" ok="{{ok2}}" lowerkeypad="keypadlower_visible" upkeypad="keypadup_visible" touchstart="keypadTouch()"/>
</div>

可见：标签 <all-keypad />中的属性与allKeypad的scope中的属性一一对应。

注意事项：经过本人测试scope中属性最好不要出项大写，如upkeypad写成upKeypad，虽然相关书籍上表示可在使用时用up-keypad代替，但是有些时候传值失败,原因尚不明确！
蚂蚁冲锋队
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值