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
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 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”
Share your progress!
Reference
Url: http://www.thinkster.io/angularjs/rep5re7gTM/angularjs-directive-restrictions
AngularJS - Directive Restrictions,布布扣,bubuko.com