Angular指令之restict匹配模式的详解


Posted in Javascript onJuly 27, 2017

Angular指令之restict匹配模式的详解

<body data-ng-app="myapp"> 
<runn2></runn2> 
<div data-runn2></div> 
<div class="runn2"></div> 
<!-- directive: runn2 --> 
<script> 
  var app=angular.module("myapp",[]); 
  app.directive('runn2',function(){ 
    return{ 
      restrict:"EACM", 
      replace:true, 
      template:"<h1>自定义指令</h1>" 
    }; 
  }); 
</script>

restict匹配模式:分为四种:

1.元素匹配(E):<runn2></runn2>

2.属性匹配(默认A)<div data-runn2></div>

3.样式类匹配(C)<div class="runn2"></div>

4.注释匹配(M)<!-- directive: runn2 -->

注意:directive前面需要有空格runn2后面需要有空格(这是一个小坑)

注释匹配无法增加多个标签例:template:"<h1>自定义指令</h1><h2>自定义指令</h2>" 会导致报错

但是在<div><h1>自定义指令</h1><h2>自定义指令</h2></div>这样包含标签却是正常的,小坑一个

注意:必须replace=true,否则注释匹配无法使用

推荐使用元素和属性的方式使用指令

当需要创建带有自己的模板的指令时,使用元素名称的方式创建指令

当需要为已有的HTML标签增加功能时,使用属性的方式创建指令

以上就是Angular指令之restict匹配模式的实例详解,本站有关AngularJS 的文章还有很多,希望大家搜索查阅,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
Javascript与vbscript数据共享
Jan 09 Javascript
javascript 静态对象和构造函数的使用和公私问题
Mar 02 Javascript
基于jQuery的Tab选项框效果代码(插件)
Mar 01 Javascript
JS随机生成不重复数据的实例方法
Jul 17 Javascript
浮动的div自适应居中显示的js代码
Dec 23 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
Feb 21 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
Sep 14 Javascript
jQuery表单元素选择器代码实例
Feb 06 Javascript
scrapyd schedule.json setting 传入多个值问题
Aug 07 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
原生JS实现顶部导航栏显示按钮+搜索框功能
Dec 25 Javascript
JS时间戳与日期格式互相转换的简单方法示例
Jan 30 Javascript
Angularjs的$http异步删除数据详解及实例
Jul 27 #Javascript
js学习总结之DOM2兼容处理this问题的解决方法
Jul 27 #Javascript
Angularjs的键盘事件的绑定
Jul 27 #Javascript
Angularjs 事件指令详细整理
Jul 27 #Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
Jul 27 #Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
Jul 27 #Javascript
angular中实现li或者某个元素点击变色的两种方法
Jul 27 #Javascript
You might like
mayfish 数据入库验证代码
2010/04/30 PHP
基于php无限分类的深入理解
2013/06/02 PHP
PHP+Ajax检测用户名或邮件注册时是否已经存在实例教程
2014/08/23 PHP
php批量删除cookie的简单实现方法
2015/01/26 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
dropdownlist之间的互相联动实现(显示与隐藏)
2009/11/24 Javascript
jquery 使用简明教程
2014/03/05 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
2016/05/11 Javascript
获取jqGrid中选择的行的数据
2016/11/30 Javascript
浅析JavaScript动画模拟拖拽原理
2016/12/09 Javascript
JS高级运动实例分析
2016/12/20 Javascript
使用vue.js写一个tab选项卡效果
2017/03/25 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
js实现购物车功能
2018/06/12 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
2018/10/31 Javascript
vue中v-for通过动态绑定class实现触发效果
2018/12/06 Javascript
d3.js 地铁轨道交通项目实战
2019/11/27 Javascript
js实现多图和单图上传显示
2019/12/18 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
2020/10/27 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
2020/12/19 Vue.js
[33:33]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第二场 11.27
2020/11/30 DOTA
Python编程实现微信企业号文本消息推送功能示例
2017/08/21 Python
Python实现打砖块小游戏代码实例
2019/05/18 Python
基于python 凸包问题的解决
2020/04/16 Python
如何利用CSS3制作3D效果文字具体实现样式
2013/05/02 HTML / CSS
CSS3实现酷炫的3D旋转透视效果
2019/11/21 HTML / CSS
goodhealth官方海外旗舰店:新西兰国民营养师
2017/12/15 全球购物
英国美发和美容产品商城:HQhair
2019/02/08 全球购物
咨询公司各岗位职责
2013/12/02 职场文书
仓库组长岗位职责
2014/01/29 职场文书
2014村务公开实施方案
2014/02/25 职场文书
事业单位考核材料
2014/05/21 职场文书
2015中秋节慰问信范文
2015/03/23 职场文书
2016年度继续教育学习心得体会
2016/01/19 职场文书
2016年党员岗位承诺书
2016/03/24 职场文书
如何使用JavaScript策略模式校验表单
2021/04/29 Javascript