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

So you've posted the answer along with the question. What don't you understand - Is it the part of the actual implementation of the directive inside the view? — Alon Eitan
– Alon Eitan, Commented Apr 6, 2016 at 15:09

Walfrat · Accepted Answer · 2016-04-06 15:14:15Z

3

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.

answered Apr 6, 2016 at 15:14

Walfrat

5,3941 gold badge18 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mou Over a year ago

u said this "use the attr provided in link function use the scope with one way or two way binding." this is not clear to me bcoz i am new in NG. so would discuss it with posting two sample code. one with attr keyword usage and one with scope. looking for further help.

Community · Accepted Answer · 2017-05-23 11:45:04Z

1

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.

edited May 23, 2017 at 11:45

CommunityBot

11 silver badge

answered Apr 6, 2016 at 15:18

seanhodges

17.6k17 gold badges74 silver badges95 bronze badges

6 Comments

Mou Over a year ago

just seen your code arg1: "@", is it mandatory to assign scope property with @ sign ? can't it be a empty like arg1: "", please guide. thanks for answer.

Mou Over a year ago

what is the meaning of SO you said here.

seanhodges Over a year ago

"@" is a type flag, it means accept a string value. Other options are "=" to bind to another Angular scope variable and "&" to accept a javascript function.

seanhodges Over a year ago

"SO" is a shorthand (lazy) way of typing "StackOverflow".

seanhodges Over a year ago

Sure, this infographic explains the basic differences: onehungrymind.com/… and it links to these examples: plnkr.co/edit/waso3F?p=preview. I found the best way to get a feel for scope isolation to try it out and have an experiment yourself.

|

Shushanth Pallegar · Accepted Answer · 2016-04-06 15:27:07Z

1

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)

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>

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>

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

edited Apr 6, 2016 at 15:27

answered Apr 6, 2016 at 15:19

Shushanth Pallegar

2,8721 gold badge17 silver badges17 bronze badges

5 Comments

Mou Over a year ago

here scope has 3 property call variable1,variable2 and variable3. u assign some with @ sign, some with & sign some with = sign that is not clear. these signs are mandatory ?

Mou Over a year ago

u said "you can also pass data through attributes and access them using attrs in Directive's link Function" would post a easy sample code where pass data will be capture by using attrs ? thanks

Shushanth Pallegar Over a year ago

@Mou Those signs are required if you want isolate scope for your directive , which indeed acts a reusable components which is trivial for large applications.we can pass properties from parent scope to the directive based on the needs. '@' for one-way binding ,'=' for two way binding and '&' method binding.

Shushanth Pallegar Over a year ago

@Mou for passing data through attributes here is plnkr.co/edit/Y3jBbIQmWWd7oYh0YeR3?p=preview for it

Shushanth Pallegar Over a year ago

@Mou here is directive with isolated scope plnkr.co/edit/tpl:rfqcl9AHEoJZEEJxyNn2?p=preview

Collectives™ on Stack Overflow

Angular js directive and restrict option

template html file

3 Answers 3

1 Comment

6 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

template html file

3 Answers 3

1 Comment

6 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related