1 <!DOCTYPE HTML>2 <HTMLNg-app= "App">3 <HeadLang= "en">4 <MetaCharSet= "UTF-8">5 <title></title>6 <Scriptsrc= "Js/angular1.3.14.min.js"></Script>7 </Head>8 <Body>9 <gys-directive></gys-directive>Ten <pp-directivevalue= "Www.baidu.com"text= "link One"></pp-directive> One <Divpp-directive Value= "Www.gugou.com"text= "link Two"></Div> A <Script> - varAppmodule=Angular.module ("app",[]); - appmodule.directive ("gysdirective", function () { the return{ - Replace:true, - Restrict:"E", - Template:"<a href= ' http:ww.baidu.com ' > Baidu </a>" + }; - }). directive ("ppdirective", function () { + return{ A Replace:true, at Restrict:"EAC", - Template:function(elem,attr) { - return "<a href= '"+Attr.value+"' >"+Attr.text+"</a>"; - } - }; - }); in </Script> - </Body> to </HTML>
The focus is on the return above.
Let's look at all the arguments in return.
1 { 2 restrict:string,3 Priority:number,4 Terminal:boolean,5 template:string or template Function:6 function(TElement, Tattrs) {...},7 templateurl:string,8 Replace:boolean or String,9 Scope:boolean or Object,Ten Transclude:boolean, One controller:string or A function(scope, element, Attrs, transclude, Otherinjectables) {...}, - controlleras:string, - require:string, theLinkfunction(Scope, ielement, Iattrs) {...}, -Compile//returns an object or Join function, as follows: - function(TElement, Tattrs, transclude) { - return { +Prefunction(Scope, ielement, Iattrs, controller) {...}, -Postfunction(Scope, ielement, Iattrs, controller) {...} + } A return functionPostlink (...) { ... } at } -}
The restrict is an optional parameter. Used to specify in what form the directive is declared in the DOM. The default value is a, which is declared in the form of an attribute.
e:<gys-directive></gys-directive> tags
A: <div gys-directive= "expression" ></div> properties
C: <div class= "gys-directive:expression;" ></div> class Name
m:<!--directive:gys-directive expression-->
Priority : Most directives ignore this parameter, using the default value of 0, but there are some scenarios where setting high precedence is important or even necessary. For example, Ngrepeat sets this parameter to 1000, which guarantees that it will always be called before other instructions on the same element.
Terminal: This parameter is used to stop running commands that are lower than the priority of this directive on the current element. However, instructions with the same priority as the current command will still
Be executed. For example: Ngif have precedence over Ngview (they manipulate the actual terminal parameter), if the Ngif expression value is
True,ngview can be executed normally, but if the value of the ngif expression is false, it will not be executed because the Ngview has a lower priority.
template: The parameter is optional and must be set to one of the following two forms:
- A section of HTML text;
- A function that accepts two parameters, the arguments are telement and tattrs, and returns a string representing the template. The T in TElement and tattrs represents the template, which is relative to instance.
In the example above.
Templateurl is an optional parameter and can be of the following types:
A string representing the path of the external HTML file;
A function that can accept two parameters, with arguments of TElement and tattrs, and returns a string of the path to an external HTML file.
Replace: is an optional parameter, and if this parameter is set, the value must be true because the default value is False. The default value means that the template is inserted as a child element inside the element that invokes this instruction.
Angularjs Writing Instructions