Angular js directive and restrict option

Question

i was reading a write up on directive from this url https://docs.angularjs.org/guide/directive

The restrict option is typically set to:

    'A'     - only matches attribute name
    'E'    - only matches element name
    'C'    - only matches class name
    'M'    - only matches comment

<div ng-controller="Controller">
  <my-customer></my-customer>
</div>

angular.module('docsRestrictDirective', [])
.controller('Controller', ['$scope', function($scope) {
  $scope.customer = {
    name: 'Naomi',
    address: '1600 Amphitheatre'
  };
}])
.directive('myCustomer', function() {
  return {
    restrict: 'E',
    templateUrl: 'my-customer.html'
  };
});

template html file

Name: {{customer.name}} Address: {{customer.address}}

please help me to understand what is the meaning of restrict: 'E', ?

i am looking for a example where restrict will be A or C

please show me the usage of restrict: 'A' and C

also tell me how could i pass multiple argument to directives ?

thanks

Answer 1

let say you have a directive 'myDirective'

if in restrict you have only C you can only use it as classes like this :

<div class="my-directive"></div>

If it's A it's as attribute :

<div my-directive></div>

If it's E it's as element

<my-directive></my-directive>

TO pass argument you generaly se attributes :

<div my-directive my-first-argument="toto" my-second-argument="titi"></div>

To get the value you have to way :

use the attr provided in link function
use the scope with one way or two way binding.

Personnaly i prefer the attribute approach when it comme to directive, element after and class in last. I have already bootstrap based on classes i don't want to clash with it.

Answer 2

please help me to understand what is the meaning of restrict: 'E', ?

The 'E' restriction will match by element name:

<my-customer></my-customer>

i am looking for a example where restrict will be A or C

please show me the usage of restrict: 'A' and C

The 'A' restriction will match by an element attribute:

<div my-customer=""></div>

The 'C' restriction will match by a class:

<div class="my-customer"></div>

also tell me how could i pass multiple argument to directives ?

It depends on your requirements, but one simple way is using an isolated scope:

.directive('myCustomer', function() {
  return {
    restrict: 'E',
    scope: {
       arg1: "@",
       arg2: "@"
    },
    templateUrl: 'my-customer.html'
  };
});

<my-customer arg1="first" arg2="second"></my-customer>

This SO answer gives a pretty good explanation of this process.

Answer 3

restrict is key to be used in DDO (Directive Definition Object) to inform what it Would be in view

for Example in DDO (Directive Definition Object)

1. Directive with restrict:E (Element)

   Directive

   app.directive('my-directive',function(){
            return {
               restrict: 'E', //means HTML Element
               ...
             };
   });
   

   so directive in View for restrict:'E' as Element in HTML element as below

view

<myDirective></myDirective>

2. Directive with restrict:A (Attributes)

Directive

 app.directive('my-directive',function(){
     return {
        restrict: 'A', //means HTML attribute
        ...
      };
     })

so directive in View for restrict:'A' as attribute in HTML element as below

view

<div myDirective></div>

3. Directive with restrict:'C' (class)

Directive

 app.directive('my-directive',function(){
     return {
        restrict: 'C', //means HTML attribute
        ...
      };
     })

so directive in View for restrict:'C' as class in HTML element as below

view

<div class="myDirective"></div>

you can use Isolate scope (doesn't inherit from its parents scope) or you can pass variables to attributes which depends on your implementation both can used in directive's link and controller

for isolate scope DDO will be as

<my-directive variable1="hello" variable2="world" variable3="call()"></my-directive>



app.directive('myDirective',function(){
         restrict:E,
        scope:{
           variable1:'@variable1',
           variable2:'=varialbe2',
           variable3:'&variable3'
          }
    })

Or you can also pass data through attributes and access them using attrs in Directive's link Function and $attrs DI in Directives Controller