ANGULARJS directive returns an explanation of the object's properties _angularjs

written in the front: because the directive part of the ANGULARJS is the most important, so will be divided into chapters to explain. This chapter mainly explains the relatively simple properties of the directive return object

In Angularjs, the. directive () is used to define the directive, which receives two parameters: the name of the instruction, the Factory_function (the function defines the entire behavior of the instruction, and returns an object)

Chestnuts:

Index.js
angular.module (' myApp ', []);
Myapp.directive (' mydirective ', function () {return {};});

The returned object contains the following properties and methods:

1:restrict:string

This property is used to indicate in what form the mydirective instruction is declared in the DOM (that is, where it should be used in HTML).
The optional values for this attribute are: E (Element), A (property, default), C (class name), M (note), which can be used separately or in combination with
Have seen a saying: if you want to customize a separate instruction function, that is, the instruction to complete a series of operations independently, not dependent on other elements, attributes, etc., the directive is defined as an element, if you want to use the directive to extend the functionality of an existing instruction, it is defined as a property. I don't know if it's reasonable to understand, but it's also a good way to learn from the selection criteria

2:priority:number

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

3:terminal:boolean

This property is associated with the priority property, which is used to determine whether to stop an instruction that is lower than the priority of this instruction on the current element, but the same priority will still execute
Chestnuts:

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 result is that the browser will display Hello World, but after adding the myDirective1 instruction, the priority priority setting is larger than the mydirective. And after setting the property terminal property to True on MyDirective1, the execution of the mydirective instruction is stopped.

4:template:string/function

The attribute defines a template (that is, the part of the HTML file that is used to the directive replaces the template's content, so the template is mostly HTML-formatted)
There are two forms of properties: A piece of HTML text, a function that returns a template string, and the function receives two parameters: Telement,tattrs

5:templateurl:string/function

When the template content is more, directly nested in the template will appear redundant, you can take the template code in a separate file, then you will need to introduce files, Templateurl can do
The property also has two forms: a string representing the path to the external HTML file, a function that returns the external HTML file path string, which receives two parameters: Telement,tattrs

6:replace:boolean

The default value of this property is false, indicating whether the template is inserted inside the element that invoked the directive as a child element, or overrides the element that invoked the directive.
Chestnuts:

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 is rendered as <my-directive><div>hello world</div></my-directive>
When True, renders as <div>hello world</div>

7:transclude:boolean

Chestnuts:

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

As in this example, if there is content inside the instruction, normally the template template will overwrite it directly, but now I want to keep it, and then transclude will use it.

Index.js
angular.module (' myApp ', [])
. dirctive (' mydirective ', function () {return
  {
    restrict: ' EA ', 
    transclude:true,
    Template: ' <div>hello <span ng-transclude></span></div> '
  };
})

The JS code above inserts the world contained in the HTML file directive into the span element in the template, noting that the span element adds the ng-transclude built-in instruction attribute (this is important)
In short, the function of this property is to tell the ANGULARJS compiler to place what it obtains from the DOM element where it finds the ng-transclude instruction.
The above is the entire content of this article, I hope to help you learn.