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 相关文章推荐
jquery 追加tr和删除tr示例代码
Sep 12 Javascript
JS画线(实例代码)
Nov 20 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
Aug 13 Javascript
Jquery插件easyUi实现表单验证示例
Dec 15 Javascript
引用jquery框架后出错的解决方法
Aug 09 Javascript
javascript深拷贝(deepClone)详解
Aug 24 Javascript
微信小程序实现换肤功能
Mar 14 Javascript
详解开发react应用最好用的脚手架 create-react-app
Apr 24 Javascript
Webpack之tree-starking 解析
Sep 11 Javascript
微信小程序实现下拉框功能
Jul 16 Javascript
jstree中的checkbox默认选中和隐藏示例代码
Dec 29 Javascript
javascript实现时间日期的格式化的方法汇总
Aug 06 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
PHP 获取目录下的图片并随机显示的代码
2009/12/28 PHP
php数组函数序列之array_sum() - 计算数组元素值之和
2011/10/29 PHP
Laravel 5框架学习之环境与配置
2015/04/08 PHP
php实现通过soap调用.Net的WebService asmx文件
2017/02/27 PHP
PHP使用glob方法遍历文件夹下所有文件的实例
2018/10/17 PHP
laravel中数据显示方法(默认值和下拉option默认选中)
2019/10/11 PHP
WEB高性能开发之疯狂的HTML压缩
2010/06/19 Javascript
用于deeplink的js方法(判断手机是否安装app)
2014/04/02 Javascript
jquery 表格排序、实时搜索表格内容(附图)
2014/05/19 Javascript
跟我学Nodejs(三)--- Node.js模块
2014/05/25 NodeJs
js实现交换运动效果的方法
2015/04/10 Javascript
javascript文件加载管理简单实现方法
2015/07/25 Javascript
js实现倒计时效果(小于10补零)
2017/03/08 Javascript
JavaScript之promise_动力节点Java学院整理
2017/07/03 Javascript
利用canvas实现的加载动画效果实例代码
2017/07/05 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
2017/12/08 Javascript
Vue全局分页组件的实现代码
2018/08/10 Javascript
angular2 ng2-file-upload上传示例代码
2018/08/23 Javascript
vue.js父子组件通信动态绑定的实例
2018/09/28 Javascript
Vue.js 中的 v-cloak 指令及使用详解
2018/11/19 Javascript
使用p5.js临摹动态图形
2019/10/23 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
2020/02/10 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
2020/02/14 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
2020/11/16 Javascript
通过5个知识点轻松搞定Python的作用域
2016/09/09 Python
对Python定时任务的启动和停止方法详解
2019/02/19 Python
CentOS7下安装python3.6.8的教程详解
2020/01/03 Python
pandas使用之宽表变窄表的实现
2020/04/12 Python
在django中实现choices字段获取对应字段值
2020/07/12 Python
毕业生求职简历中的自我评价
2013/10/18 职场文书
车间副主任岗位职责
2013/12/24 职场文书
大学生职业生涯规划范文——找准自我,定位人生
2014/01/23 职场文书
教师遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
Java如何实现树的同构?
2021/06/22 Java/Android
Python OpenCV之常用滤波器使用详解
2022/04/07 Python
Golang 实现 WebSockets 之创建 WebSockets
2022/04/24 Golang