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.
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>adbb35bdcb0fb2fe4e0d48096f28053d
   A (attribute, default value) 401d50e34953102cca7b8f2abce3179794b3e26ee717c64999d7867364b1b4a3
   C (class name) cbc5a80eb9a697ceddce0ca24531aaf994b3e26ee717c64999d7867364b1b4a3
   M (comment) 89e6d564547e5c29268e47edfa9a9b80

2. priority priority is used to indicate the priority order of instruction usage
   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
   is used to represent a template, which can be a string, such as "4a249f0d628e2318394fd9b75b4636b1This is a custom instruction2e9b454fa8428549ca2e64dfac4625cd", 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!