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  
var app = angular.module("superhero",[])
app.directive("superman",function(){
return{
restrict:"A",
link:function(){
alert("I'm working");
}
};
});

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

index.html

  

 <div ng-app="superhero">
<div superman></div>
</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

    <div ng-app="superhero"> <div superman></div> </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

  

 <div ng-app="superhero">
<!-- directive:superman -->
</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

  

 var app = angular.module("superhero",[])
app.directive("superman",function(){
return{
restrict:"A",
link:function(){
alert("I'm working");
}
};
});
app.directive("flash",function(){
return{
restrict:"A",
link:function(){
alert("I'm working");
}
};
});

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

index.html

  

 <div ng-app="superhero">
<div superman flash></div>
</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”

Share your progress!
 
Reference Url: http://www.thinkster.io/angularjs/rep5re7gTM/angularjs-directive-restrictions

AngularJS - Directive Restrictions的更多相关文章

  1. 学习AngularJs:Directive指令用法

    跟我学AngularJs:Directive指令用法解读(上) http://blog.csdn.net/evankaka/article/details/51232895 跟我学AngularJs: ...

  2. angularjs directive 实例 详解

    前面提到了angularjs的factory,service,provider,这个可以理解成php的model,这种model是不带html的,今天所说的directive,也可以理解成php的mo ...

  3. 学习AngularJs:Directive指令用法(完整版)

    这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下   本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...

  4. Angularjs directive全面解读(1.4.5)

    说到Angularjs directive即指令,可以这么说Angularjs的灵魂就是指令,学会Angularjs指令那么你的Angularjs的武功就修炼了一半了,当然这只是鄙人的一点点独到见解, ...

  5. angularjs directive (自定义标签解析)

    angularjs directive (自定义标签解析) 定义tpl <!-- 注意要有根标签 --> <div class="list list-inset" ...

  6. 步入angularjs directive(指令)--点击按钮加入loading状态

    今天我终于鼓起勇气写自己的博客了,激动与害怕并存,希望大家能多多批评指导,如果能够帮助大家,也希望大家点个赞!! 用angularjs 工作也有段时间了,总体感觉最有挑战性的还是指令,因为没有指令的a ...

  7. AngularJS Directive 隔离 Scope 数据交互

    什么是隔离 Scope AngularJS 的 directive 默认能共享父 scope 中定义的属性,例如在模版中直接使用父 scope 中的对象和属性.通常使用这种直接共享的方式可以实现一些简 ...

  8. [译]angularjs directive design made easy

    原文: http://seanhess.github.io/2013/10/14/angularjs-directive-design.html AngularJS directives很酷 Angu ...

  9. AngularJS directive 指令相关记录

    .... .directive('scopeDemo',function(){ return{ template: "<div class='panel-body'>Name: ...

随机推荐

  1. Leetcode 102 二叉树的层次遍历 Python

    二叉树的层次遍历 给定一个二叉树,返回其按层次遍历的节点值. (即逐层地,从左到右访问所有节点). 例如: 给定二叉树: [3,9,20,null,null,15,7],   3   / \ 9 20 ...

  2. Spring 并发事务的探究

    前言 在目前的软件架构中,不仅存在单独的数据库操作(一条SQL以内,还存在逻辑性的一组操作.而互联网软件系统最少不了的就是对共享资源的操作.比如热闹的集市,抢购的人群对同见商品的抢购由一位售货员来处理 ...

  3. django 的 安全机制

    xss 保护: xss攻击允许用户注入客户端脚本到其他用户的服务器上.通常通过存储恶意脚本到数据库,其他用户通过数据库获取恶意脚本,并在浏览器上呈现:或是使用户点击会引起攻击者javascirpt脚本 ...

  4. docker 实例设置自动重启

    yaml格式太严格了,每个冒号后面都必须带有空格在linux中./代表当前目录,属于相对路径../代表上一级目录,属于相对路径/代表根目录,/开头的文件都是绝对路径./configure的意思是执行当 ...

  5. java_I/O字符流

    I/O流(Stream) INPUT:输入流,从文件里读OUPUT:输出流,写内容到文件 IO流分为:字符流和字节流 字符流:处理纯文本文件. 字节流:处理可以所有文件. 字符输出流测试: @Test ...

  6. bzoj4842: [Neerc2016]Delight for a Cat

    bzoj4842 这是一道网络流的题(大家都看出来了吧) 首先我们简化一下题目,选出最关键的部分(就是知道什么和要求什么,还有条件) 我们在这里把睡觉设为0,至少有t0时间在睡觉,把打隔膜设为1,至少 ...

  7. FlowPortal-BPM——移动手机端配置与IIS发布

    一.移动手机端配置 (1)VS打开文件夹iAnyWhere,配置config文件 (2)BPM-Web文件config中设置(设置为外网网址) 二.BPM设置 勾选移动审批可以设置要展示的字段信息,修 ...

  8. 在 Go 语言中使用 Log 包--转自GCTT

    Linux 在许多方面相对于 Windows 来说都是独特的,在 Linux 中编写程序也不例外.标准输出,标准 err 和 null devices 的使用不仅是一个好主意,也是一个原则.如果您的程 ...

  9. 新手入门贴之基于 python 语言的接口自动化 demo 小实战

    大家好,我是正在学习接口测试的菜鸟.近期通过自己的学习,完成了一个关于测试接口的接口自动化demo.下面想跟大家分享一下,主要的思路是根据接口文档确定测试用例,并将测试用例写在excel中.因为只是小 ...

  10. django.db.utils.OperationalError: (1071, 'Specified key was too long; max key length is 767 bytes')

    环境介绍 Django (2.1)  Python 3.5.5 mysqlclient (1.4.2.post1) Mysql 5.6.28 RHEL 7.3 在migrate时候报错 model代码 ...