angularJs custom directive

The content of this article is about angularJs custom instructions. Now I share it with everyone. Friends in need can refer to it

1. Definition

For instructions, it can be simply understood as a function that runs on a specific DOM element. Instructions can extend the functionality of this element.

2. Method of defining instructions:

<br/>

The first parameter, the name of the instruction myDirective, is used to reference a specific instruction in the view. <br/>The second parameter is a function. This function returns an object. The $compile service uses the object returned by this method to construct the behavior of the instruction when the DOM calls the instruction.

3. Options set by the directive

<br/>

1. restrict In what form the directive can be referenced or declared in the DOM

   <br/>

   E (element) < ;my-directive> <br/>A (attribute, default value)

   <br/>C (class name)
   <br/>M (comment) <--directive:my-directive expression-->

2. priority priority is used to indicate the priority order of instruction usage<br/>If there are two instructions with the same priority on an element, the one declared earlier will be called first. If one of them has a higher priority, it will be called first regardless of the order of declaration: the instruction with the higher priority always runs first.

3. terminal is used to tell AngularJS to stop running instructions with a lower priority than this instruction on the current element. However, instructions with the same priority as the current instruction will still be executed.

   <br/>

4. template <br/> is used to represent a template, which can be a string, such as "

   This is a custom instruction

   ", or it can be a Function, you can refer to the above example

   <br/>

5. templateUrl is used to represent the template, which is similar to the template function above, but represents the path, which can be a string of the external HTML file path or a A function that accepts two parameters, tElement and tAttrs, and returns a string with the path to an external HTML file.

6. replace The default is false, the template will be inserted as a child element into the element calling this directive, if it is true, the element will be directly replaced

   <br/>

7. scope

   <br/>

   <br/>

   <br/>

   <br/>

   <br/>

   <br/>

   <br/>

8. controller
   controller参数可以是一个字符串或一个函数。当设置为字符串时，会以字符串的值为名字， 来查找注册在应用中的控制器的构造函数.当为函数时，可以像平时写控制器那样写，可以将任意可以被注入的AngularJS服务传递给控制器

9. controllerAs（字符串）
   controllerAs参数用来设置控制器的别名，可以以此为名来发布控制器，并且作用域可以访 问controllerAs。这样就可以在视图中引用控制器，甚至无需注入$scope。

10. require
    require参数可以被设置为字符串或数组，字符串代表另外一个指令的名字。require会将控 制器注入到其值所指定的指令中，并作为当前指令的链接函数的第四个参数。

    
    

The above is the detailed content of angularJs custom directive. For more information, please follow other related articles on the PHP Chinese website!