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对JSON进行模式匹配(Part 1-设计)
Jul 17 Javascript
通过隐藏iframe实现文件下载的js方法介绍
Feb 26 Javascript
jQuery打印指定区域Html页面并自动分页
Jul 04 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
Apr 20 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
Aug 20 Javascript
支持移动端原生js轮播图
Feb 16 Javascript
利用PM2部署node.js项目的方法教程
May 10 Javascript
详解vue2 $watch要注意的问题
Sep 08 Javascript
vue自定义过滤器创建和使用方法详解
Nov 06 Javascript
利用vue开发一个所谓的数独方法实例
Dec 21 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
May 16 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
Jun 11 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实现的汉字拼音转换和公历农历转换类及使用示例
2014/07/01 PHP
php对文件进行hash运算的方法
2015/04/03 PHP
php 二维数组快速排序算法的实现代码
2017/10/17 PHP
Laravle eloquent 多对多模型关联实例详解
2017/11/22 PHP
JavaScript面向对象编程
2008/03/02 Javascript
jQuery 操作XML入门
2008/12/25 Javascript
javascript中的void运算符语法及使用介绍
2013/03/10 Javascript
JQuery.Ajax之错误调试帮助信息介绍
2013/07/04 Javascript
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
2015/03/23 Javascript
javascript省市区三级联动下拉框菜单实例演示
2015/11/29 Javascript
jQuery给元素添加样式的方法详解
2015/12/30 Javascript
jQuery实现放大镜效果实例代码
2016/03/17 Javascript
第十章之巨幕页头缩略图与警告框组件
2016/04/25 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
2016/06/22 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
2016/09/19 Javascript
angularjs之$timeout指令详解
2017/06/13 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
2017/07/05 Javascript
jQuery取得元素标签名称小结(附代码)
2017/08/16 jQuery
koa2使用ejs和nunjucks作为模板引擎的使用
2018/11/27 Javascript
微信小程序网络层封装的实现(promise, 登录锁)
2019/05/08 Javascript
世界上最短的数字判断js代码
2019/09/09 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
2020/02/11 Javascript
在vue项目中 实现定义全局变量 全局函数操作
2020/10/26 Javascript
Python threading多线程编程实例
2014/09/18 Python
Python文件的读写和异常代码示例
2017/10/31 Python
django自带serializers序列化返回指定字段的方法
2019/08/21 Python
django 做 migrate 时 表已存在的处理方法
2019/08/31 Python
HTML5 背景的显示区域实现
2020/07/09 HTML / CSS
TripAdvisor土耳其网站:全球知名旅行社区,真实旅客评论
2017/04/17 全球购物
结婚典礼证婚词
2014/01/11 职场文书
违反课堂纪律检讨书
2014/01/19 职场文书
结婚当天新郎保证书
2015/05/08 职场文书
2016公司新年问候语
2015/11/11 职场文书
MySQL快速插入一亿测试数据
2021/06/23 MySQL
Python初识逻辑与if语句及用法大全
2021/08/07 Python