Written in front:Since the direct part is the top priority in angularjs,So I will explain in multiple chapters.This chapter mainly explains the simpler properties in the direct return object.

angulardirect uses .directive () to define directives,This method receives two parameters:name (the name of the instruction), factory_function (the function defines the overall behavior of the instruction,Returns an object)

chestnut:

//index.js
angular.module ("myapp", []);
myapp.directive ("mydirective", function () {return {};});

The returned object contains the following properties and methods:

1:restrict:string

This attribute is used to indicate in what form the mydirective directive is declared in the dom (that is, where to use it in html)

The optional values ​​of this attribute are:e (element), a (attribute, default value), c (class name), m (comment), which can be used alone,Can also be used in combination

I have seen a saying:If i want to customize a separate command function,That is, the instruction completes a series of operations independently,Define the instruction as an element without depending on other elements, attributes, etc .;If i want to use this instruction to extend the functionality of an existing instruction,It is defined as an attribute.I don't know if it is reasonable to understand that.But it is also a good selection method standard

2:priority:number

This attribute is used to define the priority of the instruction (the default is 0, ngrepeat is the highest priority of all built-in instructions,1000), the higher priority is executed first.

3:terminal:boolean

This attribute is related to the priority attribute,It is used to determine whether to stop running instructions on the current element that have a lower priority than this instruction.But the same priority will still be executed

chestnut:

//index.js
angular.module ("myapp", [])
.directive ("mydirective", function () {
  return {
    restrict:"ae",    priority:1,    template:"<div>hello world</div>"
  };
})
.directive ("mydirective1", function () {
  return {
    restrict:"ae",    priority:3,    terminal:true
  };
})

<!-Index.html->
<div my-directive my-directive1></div>

If the mydirective1 instruction is not defined, the browser will display hello world as a result, but after adding the mydirective1 instruction,And set its priority priority to greater than mydirective, and set the terminal property of the property on mydirective1 to true, it will stop the execution of mydirective instructions.

4:template:string/function

This attribute defines a template (that is, the part of the directive used in the html file will replace the template content,So the template is mainly in html format)

Attributes come in two forms:a piece of html text, a function that returns a template string,And this function receives two parameters:telement, tattrs

5:templateurl:string/function

When there are more templates,It would appear redundant to nest directly in the template,You can save the template code in a separate file.Then you need to introduce the file,templateurl can do it

Attributes also come in two forms:a string representing the path to an external html file, and a function that returns a path string to an external html file.This function takes two parameters:telement, tattrs

6:replace:boolean

The default value of this attribute is false, indicating that the template will be inserted as a child element inside the element that called the instruction,It also overrides the element that called the instruction.

chestnut:

//index.js
angular.module ("myapp", [])
.directive ("mydirective", function () {
  return {
    restrict:"a",    template:"<div>hello world</div>",    replace:true/false
  };
})

<!-Index.html->
<my-directive></my-directive>

When repalce is false, the browser-side source code renders as<my-directive><div>hello world</div></my-directive>

When true, renders as<div>hello world</div>

7:transclude:boolean

chestnut:

<!-Index.html->
<div my-directive>world</div>

Like this example,If there is content inside the instruction,In general, the template template will directly override and replace the content,But now I want to keep it,Then transclude comes in handy

//index.js
angular.module ("myapp", [])
.dirctive ("mydirective", function () {
  return {
    restrict:"ea",    transclude:true,    template:"<div&hello;<span ng-transclude></span></div>"
  };
})

The above js code will embed the world contained in the html file directive into the span element in the template. Note that the span element adds the ng-transclude built-in directive attribute (this is very important)

In short, the role of this attribute,It tells the angularjs compiler to put what it gets from the dom element where it finds the ng-transclude directive.