[Angularjs] Custom directives

Write in front

The role of directives can be simply described as implementing semantic tags, such as you in the mobile H5 application, there is a regular use of functions, such as the function of the address book, different pages are used, then you can encapsulate it as an instruction, in the use of this can be <friends></ Friends> 's semantic tags are used directly on the page.

Example

First implement a HelloWorld example, let us start with the custom instructions, first understand the beauty of the command.

Define directive Helloword

var app = Angular.module (' App_store ', [' Ngroute ', ' Storeservice ',]); // Custom Directives function () {    return  {        ' E ',        ' ,         true     };});

Using directives

< HelloWorld ></ HelloWorld >

Effect

The generated HTML

<ng-view= ""  class= "Ng-scope">    <  class = "Ng-scope" > Hello World </H1  > </ Div >

When you see the generated tags, you probably already guessed the role of the template.

Restrict: Description of the instructions in HTML rendering, the options are "a", "E" and "C", "M", respectively, representing the attribute, element, class and comment (the default is "A"), corresponding to the first letter is also easy to remember.

Example

A:<div helloworld></div>

C:<div class= "HelloWorld" ></div>

m:<!--HelloWorld--

Transclude

The purpose of the directive is to replace the custom instruction label with a label that the browser can recognize, and if a child tag appears inside the custom tag, then transclude can help me with it.

// Custom Directives function () {    return  {        ' E ',        ' <div> Hello world<span ng-transclude ></span></div> ',        true    };});

Use on HTML

The generated HTML
Link
The instructions are responsible for performing DOM operations and registering event listeners.
Parameters
Scope: A reference to the scope of the directive. The scope variable is not defined at initialization time, and the link method registers the monitor to monitor value change events.
Element: A reference to the DOM element that contains the instruction, which is typically manipulated by the jquery instance.
Controller: Used in the case of nested directives. This parameter acts on the reference of the handle instruction to the parent instruction, allowing for interaction between instructions.
Scope
Create the scope of the directive, and scope is passed as a property label in the directive. Scope is a prerequisite for creating reusable directives, and each instruction, regardless of the level of the nested instruction, has its own unique scope, and it does not depend on the parent scope. The scope object defines the names and types variables.
"@": (Value passing, one-way binding), the instruction retrieves the value in the string passed from the parent scope. Directives can use this value but cannot be modified, and are commonly used variables.
"=": (Reference, bidirectional binding), instruction retrieves the reference value in scope. Values can be of any type, including conforming objects and arrays. Directives can change the values in the parent scope, so we need this type when the instruction needs to modify the values in the parent scope.
"&": An expression that functions in the parent scope, which allows the instruction to implement an operation that is more advanced than the modification value.
Implementing Friends Custom Directives
var app = Angular.module (' App_store ', [' Ngroute ', ' Storeservice ',]); // Custom Directives function () {    return  {        ' E ',        Controller:' Friendscontroller ',        '. /scripts/views/friends.html ',        true,        scope: {            type:' & '         }    };});
Friends templates
<Divclass= "Address_serace">    <inputclass= "Form-control"Ng-change=""Ng-model= "Friendkey"placeholder= "Search"></Div><Divclass= "Address_div">    <DLclass= "Address_dl"ng-repeat= "Item in orders">        <DTclass= "Address_checkbox">            <imgclass= "Address_check"src=".. /images/[email protected] " />        </DT>        <DTclass= "Address_user"><imgclass= "Address_user"src=".. /images/dingy.png " /></DT>        <DDclass= "Address_font">            <Pclass= "address_font_t">{Item.} Name}}</P>            <P>From:{{item. Price}}</P>        </DD>    </DL></Div>
Use directive friends under routing #/home
< Friends ></ Friends >
Browse page
Here, in order to facilitate the existence of a template directly inside an HTML page, you can also be stitched into the form of a string to write the label in the custom instructions.
Summarize
Take the time to fill in the instructions today.
Reference
Http://www.cnblogs.com/powertoolsteam/p/angularjs-custom-directive.html
[Angularjs] Custom directives