AngularJSdirective returned object attributes _ AngularJS

This article describes AngularJSdirective's returned object attributes in detail. Interested parties can refer to this article: as the directive part is the top priority of angularjs, therefore, it will be explained in multiple chapters. This chapter mainly describes the simple attributes of directive returned objects.

Angularjs uses. directive () to define commands. This method receives two parameters: name (command name) and factory_function (the function defines all the actions of commands and returns an object)

Chestnuts:

//index.jsangular.module('myApp',[]);myApp.directive('myDirective',function() {return {};});

The returned object contains the following attributes and methods:

1: restrict: String

This attribute is used to indicate the form in which the myDirective command is declared in the DOM (that is, where it should be used in html)
Optional values of this attribute include E (element), A (attribute, default value), C (class name), and M (comment), which can be used independently or in combination.
I have seen a saying that if you want to customize an independent command function, that is, the command completes a series of operations independently without attaching other elements or attributes, define the command as an element. If you want to use the command to extend the function of an existing command, define it as an attribute. I don't know whether this understanding is reasonable, but it is also a good selection method standard that can be used for reference.

2: priority: Number

This attribute is used to define the priority of a command (the default value is 0, and ngRepeat is the highest priority among all built-in commands, which is 1000). It is executed first with a higher priority.

3: terminal: Boolean

This attribute is related to the priority attribute. It is used to determine whether to stop running commands with lower priority than the current command. However, commands with the same priority will still be executed.
Chestnuts:

//index.jsangular.module('myApp',[]).directive('myDirective',function() {  return {    restrict: 'AE',    priority: 1,    template: '
hello world
'  };}).directive('myDirective1',function() {  return {    restrict: 'AE',    priority: 3,    terminal: true  };})

If the myDirective1 command is not defined, the browser displays hello world. However, after the myDirective1 command is added, the browser sets its priority to be greater than myDirective, if the attribute terminal is set to true on myDirective1, the execution of the myDirective command is stopped.

4: template: String/Function

This attribute defines a template (that is, the content of this template will be replaced when this directive is used in the html file, so this template is mainly in html format)
There are two types of attributes: an html text segment, a function that returns the template string, and the function receives two parameters: tElement, tAttrs

5: templateUrl: String/Function

When the template contains a large amount of content, directly nested in the template will appear redundant. You can store the template code in a single file, then you need to introduce the file, templateUrl can do this
There are two types of attributes: a string that represents the path of an external html file and a function that returns the path string of 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 into the element that calls the instruction as a sub-element, or overwrite the element that calls the instruction.
Chestnuts:

//index.jsangular.module('myApp',[]).directive('myDirective',function() {  return {    restrict: 'A',    template: '
hello world
',    replace: true/false  };  }) 

When repalce is set to false, the browser source code is displayed

Hello world

If this parameter is set to true

Hello world

7: transclude: Boolean

Chestnuts:

 
world

In this example, if there is content inside the instruction, the template will overwrite and replace the content directly, but now I want to keep it, and transclude will be used.

//index.jsangular.module('myApp',[]).dirctive('myDirective',function() {  return {    restrict: 'EA',     transclude: true,    template: '
hello 
'  };})

The above js Code will embed the world contained in the html file instructions into the span element of the template. Note that the ng-transclude built-in directive attribute is added to the span element (this is very important)
In short, the function of this attribute is to tell angularjs compiler to place the content it obtains from the DOM element where it discovers the ng-transclude instruction.
The above is all the content of this article, hoping to help you learn.