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.
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:
<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.
<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.
<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”)
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
<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”
最新文章
- window frida安装
- 不行，受不了了，我要记录下这个 bug
- JDBC获取sql server存储过程查询结果集（没有出参）
- js 判断数组中是否存在
- 使用C#连接ORACLE数据库
- @Index用法——javax.persistence.Index
- DropDownList为啥总是获取第一项的值？？？
- 关系型数据库MySql-模糊搜索优化(like %abc%):全文搜索引擎技术选型
- 快学 Scala 入门 3 部曲
- 【javascript】函数中的this的四种绑定形式
- C#中的常识
- 百度文库的实现——java利用openoffice，批量word转pdf
- Python面向对象基础：设置对象属性
- c#基础之异常处理
- vue scoped 穿透_vue 修改内部组件样式问题
- k8s 健康检查
- 自己写的SeekBarPreference，可以实现seekbar滑动监听和设置默认进度和最大进度
- gitlab+jenkins持续集成--http方式连接gitlab
- 做iphone5适配时，一定要做好图片大小的调整。
- NBU 还原windows ORACLE数据库(BW)