AngularJS Directive-Opening brief introduction (Turn)

Directive is actually a way to make HTML more powerful. It can deform the DOM according to demand, or inject behavior.

Think it is very mysterious, in fact, a bit is not mysterious, as long as the beginning to use ANGULARJS, it must be used in directive, for example, we write in the HTML, ng-controller ng-model and so on are ng-show angularjs provide directive AH ~

So how did the interior come true? Or if you think angularjs built-in directive does not give force? Now let's make a try for ourselves.

First, a relatively simple requirements, if our application often use the address information input options, if not custom directive,html to write such a ~

<Divclass= "Address">  <label>Country:<inputtype= "text"Ng-model= "Country" />  </label>  <label>City:<inputtype= "text"Ng-model= "City" />  </label>  <label>Street Details:<inputtype= "text"Ng-model= "Address" />  </label>  <label>ZIP Code:<inputtype= "text"Ng-model= "ZipCode" />  </label></Div>

This code may have to be written several times, adding complexity to maintenance. If a custom address is directive, the code is as follows:

Before the HTML

1 <  my-address></div>

Extracted HTML template, named address.html

<Divclass= "Address">  <label>Country:<inputtype= "text"Ng-model= "Country" />  </label>  <label>City:<inputtype= "text"Ng-model= "City" />  </label>  <label>Street Details:<inputtype= "text"Ng-model= "Address" />  </label>  <label>ZIP Code:<inputtype= "text"Ng-model= "ZipCode" />  </label></Div>

Definition of Directive

function () {  return  {    "A",    "address.html",    true   }})

Named

It may be noted that the attribute defined in the HTML tag my-address is called, but the name that is written when the directive is defined in JS is myAddress , does this correspond?

In fact, it is possible, not only that, the following formats can be identified ~

• My:address
• My-address (recommended)
• My_address
• X-my-address
• Data-my-address

However, because the HTML is not case-sensitive and standard notation is to use the characteristics of the middle line, - compared my-address to recommend this kind of writing, both concise and follow the rules of HTML.

Declaration Form Restrictions

restrict: "A"This sentence represents a total of four types of restrictions on the form of Directive declarations:

• E: <my-address></my-address> Element Name label Signature
• A: <div my-address="exp"></div> Attribute Property name (default value)
• C: <div class="my-address: exp;"></div> class Name
• M: <!-- directive: my-address exp --> Comment Notes

In fact, can not write, because if not written, the default isrestrict: "A"

If you want to support a number of items, you can write it restrict: "EA" , so that it supports the notation of tags, but also support the writing of attributes

Although a total of four can be selected, but the latter two are not recommended ~

• Classes should be more related to styles, and directive names in a group of class names, not readable
• Comments are more unreliable, writing important logic in comments, too easy to ignore

The HTML content template specifies

templateUrl: "address.html"Specifies the URL path to the template, which can be used if you want to write HTML content directly:
template: "<div class=‘address‘>blabla</div>"

The following replace: true indicates whether the template HTML content will be replaced <div my-address></div> or inserted into an <div my-address></div> element, by defaultfalse

At last

Such a simple directive to write, in fact, if just want to smoke HTML template, but also can use ng-include , quite the above example replace:false of the effect ~

Using the version of Ng-include

12	//注意这里是单引号套着双引号，外面一层引号是表示标签属性的值，里面一层引号表示直接给的模板名称，因为这里也可以通过表达式的返回值来取<div ng-include=‘"address.html"‘> </div>

Looks more simple ... What did you say so much about that front?
This is not to be familiar with directive ~-_-| | |

AngularJS Directive-Intro (GO)