About angular custom directive

A summary of angular custom directive

First we create a custom directive directive named "Expander":

Angular.module ("myApp", []). Directive ("expander",function() {    return{ //directive's Some properties (key-value pairs form) are as follows:
/*
Restrict: ' EA ',
Replace:true,
Transclude:true,
scope:{...},
Template: .....,
Templateurl: .....,
Link:function (scope,element,attrs) {
　　　　　　
}
*/
}
});   

There are several main properties:

1. restrict
   E: Indicates that this directive can only be used in element mode, i.e.:<my-dialog></my-dialog>
   A: It means that it directive can only be used in attribute mode, i.e.:<div my-dialog></div>
   EA: Indicates that it can be used in directive either element or attribute mode

2. transclude
   is embedded, true/false.

3. scope
   When you write this property, it means that it will directive not inherit from it controller $scope , but will recreate it.
4. Tempalte
   Replace the real HTML code of the custom directive
5. templateUrl
   To replace a template path for a custom directive
6. link
   It can be simply understood that when directive compiled by angular, the method is executed

linkThe first parameter scope is basically the one you said above scope .

elementIn short, it is$(‘expander‘)

attrsis a map that contains all of the attributes you have on this directive page, for example: if you write on the pages directive :

<expander type="modal" animation="fade"></expander>

That attrs is:
{
Type: ' Modal ',
Animation: ' Fade '
}

About angular custom directive