ANGULARJS Study Notes (4)--Custom directives

First impressions of the directive: it is a custom label!

Let's start with a simple instruction:

<!DOCTYPE HTML><HTMLNg-app= "MYAPP">    <Head>    <title>Custom directives</title>      <Scripttype= "Text/javascript"src= "Http://localhost:10100/angular.min.js"CharSet= "Utf-8"></Script>    </Head>    <Body>        <my-directive></my-directive>        <Scripttype= "Text/javascript"src= "Mydirective.js"></Script>    </Body></HTML>

var app=angular.module ("myApp", []); App.directive ("mydirective", Directivefunc); function Directivefunc () {    return  {        restrict:"E",        Template:" <a href= ' http://baidu.com ' > Baidu </a> "    };} ;

It is important to note that:

1. The instruction name should be the hump naming style, such as "mydirective", the corresponding HTML tag is "My-directive"

2. The function should return an object

The results of the operation are as follows:

As you can see, the contents of the template are contained within the custom directives.

If you add the Replace attribute (replace:true) to the directive, the custom Directive label is replaced directly by the template content, as follows:

function Directivefunc () {    return  {        restrict:' E ',        replace:True  ,        Template:"<a href= ' http://baidu.com ' > Baidu </a>"    };

----------------------------------------------------------------------------------------------------------- --------------- Split Line 1------------------------------------------------------------------------------------------- -------------------------------

Before saying that the first impression of a directive is a custom label, often the first impression is not accurate, and actually declaring the directive does not require creating a new custom element

the declaration directives are essentially Adding functionality through elements, attributes, classes, or annotations in HTML

The following declaration directives are of a valid format:

<my-directive></my-directive>/        /element <div my-directive></div>            //Properties <div class= " My-directive "></div>//    class <!--directive:my-directive-->        // notes

However, no matter how many ways you can declare an instruction, we persist in using the attribute method because it has better cross-browser compatibility

The Restrict attribute in the directive definition is used to match the instruction format, which is the element (E), the attribute (A), the class (C), or the comment (M).

We can specify one or more formats

As we all know, the directive as a property, you can set an expression, for example

<ng-init= "greeting= ' HelloWorld '">Thegreeting is: {{ Greeting}}</H1>

Ng-init is a built-in instruction, in fact, the custom command directive is also possible, but

It is important to note that all directives (built-in or custom) Create new sub -scopes so that objects in the expression have their explicit scope range

----------------------------------------------------------------------------------------------------------- --------------- Split Line 2------------------------------------------------------------------------------------------- -------------------------------

Directives can be used as custom tags, and of course can receive parameter variables, as follows:

<!DOCTYPE HTML><HTMLNg-app= "MYAPP">    <Head>    <title>Custom directives</title>      <Scripttype= "Text/javascript"src= "Http://localhost:10100/angular.min.js"CharSet= "Utf-8"></Script>    </Head>    <Body>        <DivNg-controller= "Dirctrl"my-directive My-url={{myurl}}My-link={{mylink}}>        </Div>        <Scripttype= "Text/javascript"src= "Mydirective.js"></Script>        <Script>            <!--implicitly-Controller -            functionDirctrl ($scope) {$scope. Myurl="http://baidu.com"; $scope. MyLink="Try Baidu again";        }; </Script>    </Body></HTML>

varApp=angular.module ("myApp", []); App.directive ("Mydirective", Directivefunc);functionDirectivefunc () {return{restrict:A, replace:true, Template:' <a href= ' {{myurl}} ' >{{MyLink}}</a> ', scope: {//this "@" binding policy tells Angularjs to copy the value of the Some-property property in the DOM to the Someproperty property in the new scope objectMyurl: ' @ ', MyLink:‘@‘//The someproperty mapping in the DOM is the Some-property property by default                //if we want to explicitly specify the property name of the binding, you can use the following method                //myurl: ' @mySecondUrl '            }    };};

In doing so, it seems that all of the custom attributes, including "my-directive" itself, are also explicitly present

the life cycle of the instruction begins at $compile method and end with the link method

ANGULARJS Study Notes (4)--Custom directives