Detailed explanation of object properties returned by AngularJS directive_AngularJS

Written in front: Since the directive part is the top priority in angularjs, it will be explained in multiple chapters. This chapter mainly explains the simpler attributes in the object returned by directive

Directive() is used in angularjs to define instructions. This method receives two parameters: name (the name of the instruction), factory_function (this function defines all the behaviors of the instruction and 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 describe the form in which the myDirective directive is declared in the DOM (that is, where it should be used 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 or in combination
I have seen a saying: If you want to customize an independent command function, that is, the command can complete a series of operations independently without relying on other elements, attributes, etc., then define the command as an element; if you want to use this command To extend the functionality of an existing directive, define it as an attribute. I don’t know if this understanding is reasonable, but it is indeed a good selection method standard that can be used for reference

2: priority: Number

This attribute is used to define the priority of the instruction (the default is 0, ngRepeat has the highest priority among all built-in instructions, which is 1000). The one with 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 with a lower priority than this instruction on the current element, 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 directive is not defined, the browser will display hello world, but after adding the myDirective1 directive, setting its priority to be greater than myDirective, and setting the terminal attribute to true on myDirective1, it will stop. Execution of myDirective directive.

4: template: String/Function

This attribute defines a template (that is, the part using this instruction in the html file will replace the content of the template, so the template is mainly in html format)
Attributes come in two forms: a piece of html text, and a function that returns a template string, and the function receives two parameters: tElement, tAttrs

5: templateUrl: String/Function

When there is a lot of template content, nesting it directly in the template will appear redundant. You can store the template code in a separate file. In this case, you will need to import the file. TemplateUrl can do this
Attributes also come in two forms: a string representing the path of an external html file, and a function that returns a string of the path to an external html file. This function receives two parameters: tElement, tAttrs

6: replace: Boolean

The default value of this attribute is false, indicating whether the template will be inserted as a child element into the element that calls this directive, or overwrite and replace the element that calls this directive.
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 source code is rendered as

hello world

When true, it will appear as

hello world

7: transclude: Boolean

Chestnut:

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

Like this example, if there is content inside the instruction, usually the template will directly overwrite and replace the content, but now I want to keep it, and this is where 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 purpose of this attribute is to tell the angularjs compiler to put the content it gets from the DOM element where it finds the ng-transclude directive.
The above is the entire content of this article, I hope it will be helpful to everyone's study.