angularjs之directive实例

最新推荐文章于 2024-11-07 12:10:14 发布
最新推荐文章于 2024-11-07 12:10:14 发布
阅读量286 收藏
点赞数 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代替，但是有些时候传值失败,原因尚不明确！
蚂蚁冲锋队
关注
专栏目录
AngularJS driective 封装 自动滚动插件
07-14 100
1.ui-smooth-scroll.js文件内容 angular.module('app') .directive('uiSmoothScroll', ['$location', '$anchorScroll', function($location, $anchorScroll) { return { restrict: '...
AngualrJS学习--directive
HanLaotwo的博客
12-26 762
1.directive的作用： 自定义一个标签来实现一些特定的功能，或者显示想要的数据。比如想封装一个时间控件到指令中，通过在html代码中使用 时间控件> 就可以代用时间控件的功能，不用每次都写重复的代码。 还可以把一些复杂的操作或者在JS中不好实现的逻辑写在指令中，简化开发复杂度。 比如bootstrep的时间控件直接写到angualrJS中，当值变化时并不会出发ng-chang
AngularJS常用插件与指令收集
aboqbbh07852的博客
04-10 124
原文：http://chensd.com/2015-06/AngularJS-popular-Plugins-and-Directive.html 使用AngularJS有差不多一年时间了，前前后后也用了不少库和指令，整理了一下，分成四大类列出。有demo地址的，就直接连接到demo地址，其它的直接链到github托管库中。 图片视频类 angular-maxonry图...
angular-directive各个参数介绍
代码搬运工
03-22 2468
这篇文章只是介绍，加深理解，这里有篇例子的博客写的不错，感兴趣的可以看看 http://damoqiongqiu.iteye.com/blog/1917971 作用：自定义html中的组件（说白了就是各个页面片互相粘来粘去） 看下代码：var directives = angular.module('demo.directives', []);directives.directive('cus
AngularJS学习：directive的scope
IT老兵的驿站
04-04 527
scope The scopeproperty can be false, true, or an object: false (default): No scope will be created for the directive. The directive will use its parent's scope. False（默认）：不会为指令创建新的scope。指令将是用它
angularJS - directive
yxyCyndi的博客
06-16 413
一、directive介绍1.什么指令，从指令的用法，我可以这么解释，指令使用在dom元素上（例如属性、元素名、注释或class类），可以只是AngularJs的html编译器（$compile）将制定的行为附加在该DOM元素上（例如通过事件监听事件），甚至可以转换成DOM元素及其子集。 2.angular 自带了一系列的指令，例如：ng-Bind,ng-model和ng-class。就像创建co
AngularJs:Directive指令
htong521的博客
07-09 184
Directive的定义及其使用方法：Directive可以放置于元素名、属性、class、注释中。&lt;directive-name&gt;&lt;/directive-name&gt;//元素名&lt;span directive-name="exp"&gt;&lt;/span&gt;//属性&lt;span class="directive-name:exp;"&gt;&l
AngularJS中directive指令使用之事件绑定与指令交互用法示例
10-21
主要介绍了AngularJS中directive指令使用之事件绑定与指令交互用法,结合实例形式分析了directive指令在模板的使用，事件的绑定及元素、属性、控制器之间的交互相关操作技巧,需要的朋友可以参考下
Angularjs使用directive自定义指令实现attribute继承的方法详解
11-29
本文实例讲述了Angularjs使用directive自定义指令实现attribute继承的方法。分享给大家供大家参考，具体如下： 一、Html代码： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head&gt...
angular中的自定义指令E A C应用
weixin_44499394的博客
06-02 279
附上前端测试页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>angular</title> <script src="/static/angular/angular.js-1.7.6/angul...
AngularJS自定义指令directive：scope属性
热门推荐
VitaLemon__的专栏
08-15 2万+
一、介绍：在AngularJS中，除了内置指令如ng-click等，我们还可以自定义指令。自定义指令，是为了扩展DOM元素的功能。代码中，通过指定directive中的restrict属性，来决定这个指令是作为标签（E）、属性（A）、属性值（C）、还是注释（M）。指令的定义过程就不详述了，可以参考：https://docs.angularjs.org/guide/directive。 在这篇博客中
angularJS自定义directive之带参方法传递
蚂蚁先锋队的博客
01-16 8907
angularJS directive的参数传递一直比较模糊 现记录下来以便日后学习
angularjs手动识别字符串中的换行符
蚂蚁先锋队的博客
02-10 4744
情景一 html：  style="text-align: left;color: yellow;" disabled="true">{{value}} controller: $scope.value="1.javaScript \n 2.html5 \n 3.C++"; 显示： 1.javaScript 2.html5 3.C++     情景二
关于在android webview上运行html5的开发经验
蚂蚁先锋队的博客
01-18 1599
通过实际的开发历程，解决android webview中缓存图片的问题
angularJs 简单实例
蚂蚁先锋队的博客
01-22 669
入口 agtest.html Insert title here  A  B   testApp.js /**获得全局app对象*/ var testApp = angular.module('testApp', [ 'ngRoute']); /**配置路由器*/ testApp.conf
HTML5新增多媒体支持
最新发布
懒羊羊我小弟的博客
11-07 490
HTML5 新增多媒体支持，主要体现在音频和视频标签。音频标签可嵌入音频，有多种属性和 JavaScript API 控制，存在兼容性问题。视频标签能嵌入视频，同样有丰富属性和 API，也面临兼容性挑战。HTML5 多媒体支持具有原生、跨平台、语义化和增强用户体验等优势。
【HTML5】html5开篇基础（6）
Easonmax的博客
10-30 1221
该标签支持多种视频格式，并提供了一些属性和方法来控制视频的播放。对于autoplay在谷歌中不添加muted是自动播放不了的。标签也支持多种音频格式，并且提供了一些控制音频播放的属性。在学习html5和css3的基础上使我们的前端使用更高级。对于audio中controls和src是最重要的。对于video中controls和src是最重要的。在谷歌中autoplay是禁用的，用不了。在学习html5的基础上更加熟练运用前端。我们通常用MP4，这在所有游览器中通用。学习前端知识，更好的运用它。
AngularJS Directive深度解析：5个实战示例
"这篇博客文章详细讲解了AngularJS中的Directive（指令）机制，通过5个实例来阐述其功能和用法。文章指出指令的主要作用是实现HTML标签的语义化，使得开发者可以自定义类似JSP或Struts标签库的功能，但更灵活，能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值