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属性（转）的更多相关文章

  1. Angular自定义指令directive:scope属性

    在AngularJS中,除了内置指令如ng-click等,我们还可以自定义指令.自定义指令,是为了扩展DOM元素的功能.代码中,通过指定directive中的restrict属性,来决定这个指令是作为 ...

  2. AngularJS中Directive指令系列 - scope属性的使用

    文章是转的,我做下补充.原文地址:https://segmentfault.com/a/1190000002773689 每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部 ...

  3. 理解JAVA - 面向对象(object) - 属性，方法

    理解JAVA - 面向对象(object) - 属性,方法 多态的体现:    向上造型,父类接收子类对象:向上造型:    从父类角度看不到子类独有的方法:面向对象,人类认知世界的方式:生活中每天都 ...

  4. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  5. 深入理解JavaScript中的属性和特性

    深入理解JavaScript中的属性和特性 JavaScript中属性和特性是完全不同的两个概念,这里我将根据自己所学,来深入理解JavaScript中的属性和特性. 主要内容如下: 理解JavaSc ...

  6. 面向对象的程序设计（二）理解各种方法和属性typeof、instanceof、constructor、prototype、__proto__、isPrototypeOf、hasOwnProperty

    //理解各种方法和属性typeof.instanceof.constructor.prototype.__proto__.isPrototypeOf.hasOwnProperty. //1.typeo ...

  7. 半深入理解CSS3 object-position/object-fit属性

    半深入理解CSS3 object-position/object-fit属性 转载:https://www.zhangxinxu.com/wordpress/2015/03/css3-object-p ...

  8. u3d中刚体与碰撞体的理解以及is Trigger属性的意义

    刚体:个人理解就是具有物理属性(如:质量),接受物理作用(如:重力)的组件. 碰撞体:个人理解就是计算碰撞后的物理量(如:弹力). 刚体与碰撞体的关系:个人理解判断碰撞体就是需要计算力,如果碰撞的物体 ...

  9. 理解clear：both属性（转）

    理解clear:both属性 在前端开发布局中,经常会被float这个属性搞晕,尤其是新手 CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列.Float(浮动),往往是 ...

随机推荐

  1. Tomcat 多项目管理

    有时我们会在一个服务下存在多个项目的情况,为了统一管理和服务运行安全考虑,有时候我们需要重新部署一个项目但又不能停掉其它项目,就可以用manager进行管理. Tomcat manager和Root访 ...

  2. 对 /dev/shm的认识

    一./dev/shm理论 默认的Linux发行版中的内核配置都会开启tmpfs,映射到了/dev/下的shm目录.可以通过df 命令查看结果./dev/shm/是linux下一个非常有用的目录,因为这 ...

  3. spring浏览器国际化的原理

    We will add two languages support to our application: English and German. Depending on the locale se ...

  4. Session的常用场景

    session :存储浏览器sessionID值保存在客户端,sessionID的key:data 数据存储在服务器上 会话管理,用户登录验证,权限访问控制,购物车,临时数据.

  5. 获得Variant类型

    function GetVariantType(const v: variant): string; begin   case TVarData(v).vType of     varEmpty: r ...

  6. plot绘图

    plot绘图 坐标系图(折线图) 折线图用于显示随时间或有序类别的变化趋势 plt.plot(x,y,format_string,**kwargs) y:Y轴数据,列表或数组,必选 x:X轴数据,列表 ...

  7. str和repr的区别(转)

    Python打印值的时候会保持该值在python代码中的状态,不是用户所希望看到的状态.而使用print打印值则不一样,print打印出来的值是用户所希望看到的状态. 例如: >>> ...

  8. Java ReentrantLock和synchronized两种锁定机制的对比

    多线程和并发性并不是什么新内容,但是 Java 语言设计中的创新之一就是,它是第一个直接把跨平台线程模型和正规的内存模型集成到语言中的主流语言.核心类库包含一个 Thread 类,可以用它来构建.启动 ...

  9. Spring Retry

    最近组内准备将项目中原有的重试功能抽取出来重构为一个重试平台,由于对重试的功能要求比较高,采用了不少中间件和框架(jimdb,jproxy, Elastic-Job ,JMQ,Hbase, Disru ...

  10. Excel日期处理

    short format = cell.getCellStyle().getDataFormat(); //其值为22 输入值类型为2018/6/28 17:25:48 if (format!=22) ...