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 相关文章推荐
定义select的边框颜色
Apr 28 Javascript
js 与 php 通过json数据进行通讯示例
Mar 26 Javascript
js原型继承的两种方法对比介绍
Mar 30 Javascript
JS小游戏之象棋暗棋源码详解
Sep 25 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
Nov 04 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
Jul 04 Javascript
利用pm2部署多个node.js项目的配置教程
Oct 22 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
vue-awesome-swiper滑块插件使用方法详解
Nov 27 Javascript
javascript实现数字配对游戏的实例讲解
Dec 14 Javascript
说说如何利用 Node.js 代理解决跨域问题
Apr 22 Javascript
JavaScript实现旋转木马轮播图
Mar 16 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
2020最新CPU的性能排名
2020/04/02 数码科技
ThinkPHP文件上传实例教程
2014/08/22 PHP
PHP中的socket_read和socket_recv区别详解
2015/02/09 PHP
PHP中使用BigMap实例
2015/03/30 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
php桥接模式应用案例分析
2019/10/23 PHP
JavaScript判断两种格式的输入日期的正确性的代码
2007/03/25 Javascript
读jQuery之六 缓存数据功能介绍
2011/06/21 Javascript
探讨javascript是不是面向对象的语言
2013/11/21 Javascript
Javascript中的String对象详谈
2014/03/03 Javascript
JavaScript 动态加载脚本和样式的方法
2015/04/13 Javascript
全屏js头像上传插件源码高清版
2016/03/29 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
基于jQuery实现弹幕APP
2017/02/10 Javascript
javascript 判断当前浏览器版本并判断ie版本
2017/02/17 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
2017/09/30 Javascript
vue.js 中使用(...)运算符报错的解决方法
2018/08/09 Javascript
纯异步nodejs文件夹(目录)复制功能
2019/09/03 NodeJs
详解利用nodejs对本地json文件进行增删改查
2019/09/20 NodeJs
vue项目打包之开发环境和部署环境的实现
2020/04/23 Javascript
Nest.js 授权验证的方法示例
2021/02/22 Javascript
Python 命令行参数sys.argv
2008/09/06 Python
Python实现图像几何变换
2015/07/06 Python
浅谈Python数据类型判断及列表脚本操作
2016/11/04 Python
浅谈Python实现Apriori算法介绍
2017/12/20 Python
int在python中的含义以及用法
2019/06/27 Python
python集合的创建、添加及删除操作示例
2019/10/08 Python
Pandas对每个分组应用apply函数的实现
2020/12/13 Python
使用 css3 transform 属性来变换背景图的方法
2019/05/07 HTML / CSS
玩具反斗城西班牙网上商城:ToysRUs西班牙
2017/01/19 全球购物
测试时代收集的软件测试面试题
2013/09/25 面试题
优秀团员个人的自我评价
2013/10/02 职场文书
全国文明单位申报材料
2014/05/31 职场文书
关于运动会的广播稿50字
2014/10/17 职场文书
2014年销售内勤工作总结
2014/12/01 职场文书
手术室消毒隔离制度
2015/08/05 职场文书