理解指令的restrict属性（转）
restrcit属性说明
restrict: EACM中的任意一个之母。它是用来限制指令的声明格式的。
E - 元素名称：<my-directive></my-directive>
A - 属性： <div my-directive="exp"> </div>
C - 类名：<div class="my-directive: exp;"></div>
M - 注释： <!-- directive: my-directive exp -->
它做了什么
示例
<html ng-app='app'>
<body>
<hello> </hello>
<div hello> </div>
<div class="hello"> </div>
<!-- directive: hello -->
</body>
<script src="bower_components/angular/angular.js"></script>
<script>
var appModule = angular.module('app', []);
appModule.directive('hello', function() {
return {
restrict: 'AEC',
template: '<h3>Hi there</h3>',
replace: true
link:function(scope, elem, attrs){
console.log(elem);
//console.log(attrs);
}
};
});
</script>
</html>
运行结果
<h3>Hi there</h3>
<h3 hello>Hi there</h3>
<h3 class="hello">Hi there</h3>
<h3>Hi there</h3>
可以看到几种方式，做的事情一样，只有部分地方不同. 这些区别有什么作用？
有何作用
restrict=E时，浏览器无法识别指令的声明元素，则这个指令一定是起替换作用，也就是说template一定有值.
restrict=A时，它是以元素属性存在的，那么这个指令的作用可以不是替换. 那么它可以做什么？以link方式操作dom.
比如在初始时为元素聚焦
<input type="input" focus/>
appModule.directive('focus', function() {
return {
restrict: 'A',
link:function(scope, elem, attrs){
$(elem).focus();
}
};
});
restrict=C，则是在绑定指令的同时，指定它的css样式，让指令与样式同步.
restrict=M，则在一些场合非常有用，方便在注释与代码之间切换.
理解指令的restrict属性（转）的更多相关文章
- Angular自定义指令directive:scope属性
在AngularJS中,除了内置指令如ng-click等,我们还可以自定义指令.自定义指令,是为了扩展DOM元素的功能.代码中,通过指定directive中的restrict属性,来决定这个指令是作为 ...
- AngularJS中Directive指令系列 - scope属性的使用
文章是转的,我做下补充.原文地址:https://segmentfault.com/a/1190000002773689 每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部 ...
- 理解JAVA - 面向对象(object) - 属性，方法
理解JAVA - 面向对象(object) - 属性,方法 多态的体现: 向上造型,父类接收子类对象:向上造型: 从父类角度看不到子类独有的方法:面向对象,人类认知世界的方式:生活中每天都 ...
- 深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
- 深入理解JavaScript中的属性和特性
深入理解JavaScript中的属性和特性 JavaScript中属性和特性是完全不同的两个概念,这里我将根据自己所学,来深入理解JavaScript中的属性和特性. 主要内容如下: 理解JavaSc ...
- 面向对象的程序设计（二）理解各种方法和属性typeof、instanceof、constructor、prototype、__proto__、isPrototypeOf、hasOwnProperty
//理解各种方法和属性typeof.instanceof.constructor.prototype.__proto__.isPrototypeOf.hasOwnProperty. //1.typeo ...
- 半深入理解CSS3 object-position/object-fit属性
半深入理解CSS3 object-position/object-fit属性 转载:https://www.zhangxinxu.com/wordpress/2015/03/css3-object-p ...
- u3d中刚体与碰撞体的理解以及is Trigger属性的意义
刚体:个人理解就是具有物理属性(如:质量),接受物理作用(如:重力)的组件. 碰撞体:个人理解就是计算碰撞后的物理量(如:弹力). 刚体与碰撞体的关系:个人理解判断碰撞体就是需要计算力,如果碰撞的物体 ...
- 理解clear：both属性（转）
理解clear:both属性 在前端开发布局中,经常会被float这个属性搞晕,尤其是新手 CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列.Float(浮动),往往是 ...
随机推荐
- 基于OpenGL编写一个简易的2D渲染框架-02 搭建OpenGL环境
由于没有使用GLFW库,接下来得费一番功夫. 阅读这篇文章前请看一下这个网页:https://learnopengl-cn.github.io/01%20Getting%20started/02%20 ...
- 3 并发编程-(进程)-join方法
1.查看当前进程的进程号getpid() 和 其父 进程号 getppid() # 查看进程的pid from multiprocessing import Process import time,o ...
- Windows7 64bit+python3.6环境下安装OpenCV3.3
安装opencv3.3 打开windows的Python扩展包网址 根据自己的系统选择下载,这里我选择的是 通过pip3安装该whl文件,使用如下命令 pip3 install 该whl的绝对路径 ...
- .net数据库连接防注入参数查询 命令执行 读取 备份 导出导入转化XML格式
ADO.NET是一组类库,让我们通过程序的方式访问数据库.SYSTEM.DATA这个类提供了统一的接口访问Oracle MSSQL Access.像SYSTEM.IO类操作文件一样. **connec ...
- Tensorflow从文件读取数据
http://blog.csdn.net/zengxyuyu/article/details/53289906
- Ansible Playbook Conditionals
通常,play的结果可能取决于变量的值,facts(有关远程系统的知识)或先前的任务结果. 在某些情况下,变量的值可能取决于其他变量. 此外,可以创建其他组,以根据主机是否与其他条件匹配来管理主机. ...
- 深入MySQL用户自定义变量
一.到底MySQL的变量分哪几类? MySQL变量一共分为两大类:用户自定义变量和系统变量.如下: 用户自定义变量 局部变量 会话变量 系统变量 会话变量 全局变量 本文涉及的内容为用户自定义会话变量 ...
- fiddler 抓取 逍遥安卓模拟器 https包
1.打开fiddler,进行相关设置 Tools--Fiddler Options 接下来进行客户端网络配置 1 查看电脑ip地址,ipconfig 逍遥游模拟器中使用自带的浏览器,访问192.168 ...
- SpringBoot配置文件YML 注意事项
YML读取注意事项 使用YML时遇到的坑: 最近在做项目时,遇到了一些在读取YML配置时发生的问题,在这里写一并写下来,希望给自己以及大家一个提示,能尽量避免在读取配置文件时发生这些错误,给开发带来不 ...
- C语言实现大数四则运算
一.简介 众所周知,C语言中INT类型是有限制,不能进行超过其范围的运算,而如果采用float类型进行运算,由于float在内存中特殊的存储形式,又失去了计算的进度.要解决整个问题,一种解决方法是通过 ...