E 表示该指令是一个element; A 表示该指令是attribute; C 表示该指令是class; M 表示该指令是注视

实例如下:

原帖:www.thinkster.io/angularjs/rep5re7gTM/angularjs-directive-restrictions

While it’s cool to make a custom element like we did the the previous cast, it’s actually more common to do things like create custom attributes. These attributes are going to add things like behaviors, and we can do so by using restrict “A”. “A” is for attribute, “E” is for element. You can then provide a linking function, which is where you will put whatever the behavior is. We’re just going to alert “I’m working” to the user.

main.js
  1. var app = angular.module("superhero", [])
  2. app.directive("superman", function(){
  3. return {
  4. restrict: "A",
  5. link: function(){
  6. alert("I'm working");
  7. }
  8. };
  9. });

From here, instead of having superman as an element, let’s do a div with superman as an attribute:

index.html
  1. <div ng-app="superhero">
  2. <div superman></div>
  3. </div>

Now if we refresh, you’ll see the alert saying “I’m working” Another restriction we can use is “C” for class. If we change restrict to “C” and refresh without changing anything, we can see that nothing happens. We need to change the directive from an attribute to a class of the div.

index.html
  1. <div ng-app="superhero">
  2. <div class="superman"></div>
  3. </div>

If we refresh now, we’ll see “I’m working” alerted again. The last restriction is “M” for comment. If we change restrict to “M” and create a comment starting with “directive:” and then the name of our directive, refresh, and we’ll see that it works again.

index.html
  1. <div ng-app="superhero">
  2. <!-- directive:superman -->
  3. </div>

The “M” restriction is used the least often, usually only for backwards compatibility and for passing markup validations. Typically it’s best to add behaviors in attributes so you can stack them.

We’ll create another attribute directive, call it “flash” and set the linking function to alert “I’m working faster” and change “superman” to alert “I’m working stronger” (Don’t forget to change the “superman” directive’s restriction back to “A”)

main.js
  1. var app = angular.module("superhero", [])
  2. app.directive("superman", function(){
  3. return {
  4. restrict: "A",
  5. link: function(){
  6. alert("I'm working");
  7. }
  8. };
  9. });
  10. app.directive("flash", function(){
  11. return {
  12. restrict: "A",
  13. link: function(){
  14. alert("I'm working");
  15. }
  16. };
  17. });

Now we should have a div with both “superman” and “flash” as attributes

index.html
  1. <div ng-app="superhero">
  2. <div superman flash></div>
  3. </div>

If we refresh, we’ll see “I’m working stronger” and then “I’m working faster”

To recap: “E” is for element, “A” is for attribute, “C” is for class, and “M” is for comment. Attributes are going to be the main ones as far as adding behaviors that get used the most. If you don’t specify the restrict property it will default to “A”

angular directive restrict 的用法的更多相关文章

  1. angular directive scope

    angular directive scope 1.当directive 中不指定scope属性,则该directive 直接使用 app 的scope: 2.当directive 中指定scope属 ...

  2. angular directive 的controllerAs的用法

    原文: https://stackoverflow.com/questions/31857735/using-controlleras-with-a-directive --------------- ...

  3. angular directive

    1.restrict (字符串)可选参数,指明指令在DOM里面以什么形式被声明: 取值有:E(元素),A(属性),C(类),M(注释),其中默认值为A: E(元素):<directiveName ...

  4. angular directive自定义指令

    先来看一下自定义指令的写法 app.directive('', ['', function(){ // Runs during compile return { // name: '', // pri ...

  5. angular directive指令内的参数

    angular.module('myApp', []) .directive('myDirective', function() { return { restrict: String, priori ...

  6. angular directive指令的复用

    “指令之之所以要定义成指令就是为了复用!” 指令一定是可以用在不同的controller里面的,为了在不同的controller去使用它,我们一定要给指定的配置项一个指令.这样才能跟外面的控制器进行交 ...

  7. 使用 angular directive 和 json 数据 D3 随着标签 donut chart演示样本

    使用angular resource载入中priorityData.json中间json数据,结合D3绘制甜甜圈图.执行index.html其结果见于图.: priorityData.json中jso ...

  8. angular directive知识

    一般来讲 directive名字遵循一下规则: 1.忽略以x-和data-为元素/属性的前缀 2.转化“:”,“-”,“_”命名为驼峰命名 如下所示 <div ng-controller=&qu ...

  9. Angular @HostBinding()和@HostListener()用法

    @HostBinding()和@HostListener()在自定义指令时非常有用.@HostBinding()可以为指令的宿主元素添加类.样式.属性等,而@HostListener()可以监听宿主元 ...

随机推荐

  1. 模块讲解----os

    os:跟操作系统相关的信息 os模块的增删改查 一.cd进入: windowd: os.chdir("D:/软件/pychar/data/s13") print('获取当前位置:' ...

  2. java实现FTP下载文件

    ftp上传下载文件,是遵照ftp协议上传下载文件的,本例仅以下载文件为例. 重要的方法解释: 1.FTP功能相关依赖路径:org.apache.commons.net.ftp.*: 2.ftp默认端口 ...

  3. hibernate的事务和spring事务的区别 (转)

    spring事务: 对于传统的基于特定事务资源的事务处理而言(如基于JDBC的数据库访问),Spring并不会对其产生什么影响,我们照样可以成功编写并运行这样的代码.同时,Spring还提供了一些辅助 ...

  4. 利用page_source抓取网页中的URL,进行链接测试

    selenium的page_source方法可以获取到页面源码,下面就把它应用到链接测试中. # coding:utf-8 __author__ = 'helen' import re,request ...

  5. c++之旅:继承

    继承 继承有关于权限的继承,多继承和虚继承 权限继承 权限继承有公有继承,保护继承和私有继承 公有继承 公有继承可以继承父类的public和protected属性和方法 #include <io ...

  6. jsp 小记

    1. select 默认选中: <select name="skills" multiple="true"> <option value=&q ...

  7. 在xshell中使用sftp上传文件

    Xshell 5 (Build 1335)Copyright (c) 2002-2017 NetSarang Computer, Inc. All rights reserved. Type `hel ...

  8. python3_ftp多线程上传图片

    项目中研发人员自己写了ftp服务,没有标准ftp中的列表,准备用jmeter对ftp压力测试时发现jmeter要验证列表(如果有同学用jmeter测试过类似的分享一下方法谢谢了),没办法只能用pyth ...

  9. 注意:PHP7中十个需要避免的坑

    1.不要使用mysql_函数 这一天终于来了,从此你不仅仅“不应该”使用mysql_函数.PHP7已经把它们从核心中全部移除了,也就是说你需要迁移到好得多的mysqli_函数,或者更灵活的PDO实现. ...

  10. Oracle查询一个表的数据插入到另一个表

    1. 新增一个表,通过另一个表的结构和数据 create table XTHAME.tab1 as select * from DSKNOW.COMBDVERSION 2. 如果表存在: insert ...