AngularJS Directive Restrict A vs E

Question

I'm working in a small team, building in AngularJS and trying to maintain some basic standards & best practices; especially given we're relatively new with Angular.

My question is with regards to Directives. More accurately, the restrict options.

Some of us are using restrict: 'E' thus having <my-directive></my-directive> in the html.

Others are using restrict: 'A' and having <div my-directive></div> in the html.

Then, of course, you can use restrict: 'EA' and use either of the above.

At the moment it's no big deal, though when this project is as big as it's going to get I would like anybody looking at it to easily understand what's going on.

Are there pros/cons to either the attribute or element way of doing things?

Are there any pitfalls we should know, if choosing say element over attribute?

score 188 · Answer 1 · edited Jun 20 '20 at 09:12

188

restrict is for defining the directive type, and it can be A (Attribute), C (Class), E (Element), and M (coMment) , let's assume that the name of the directive is Doc :

Type : Usage

A = <div Doc></div>

C = <div class="Doc"></div>

E = <Doc data="book_data"></Doc>

M = 

edited Jun 20 '20 at 09:12

Community

1
1

answered Oct 23 '15 at 13:53

Seif Tml

2,413
1
17
15

3

less clear than the answer by @nikunj, but after seeing their answer I understand yours... – Alexander Mills Jul 06 '17 at 22:02
1

@AlexanderMills Not that it's a better or worse answer b/c of it, but it's almost exactly the same as [what's in the AngularJS docs](https://docs.angularjs.org/api/ng/service/$compile#-restrict-). – ruffin Jul 28 '21 at 20:43
thumbs up for the developer who came up with those short letters so that people will guess what they mean. – webmaster Jul 26 '22 at 12:00

ngasull · Accepted Answer · 2014-04-22T14:43:40.343

106

According to the documentation:

When should I use an attribute versus an element? Use an element when you are creating a component that is in control of the template. The common case for this is when you are creating a Domain-Specific Language for parts of your template. Use an attribute when you are decorating an existing element with new functionality.

Edit following comment on pitfalls for a complete answer:

Assuming you're building an app that should run on Internet Explorer <= 8, whom support has been dropped by AngularJS team from AngularJS 1.3, you have to follow the following instructions in order to make it working: https://docs.angularjs.org/guide/ie

edited Apr 22 '14 at 14:43

answered Apr 22 '14 at 13:28

ngasull

4,206
1
22
36

3

I've read up and down those docs but missed this one :) thanks. – Darren Wainwright Apr 22 '14 at 14:09
3

This explaination doesn't cover any pitfalls and pros/cons. – Konstantin Krass Apr 22 '14 at 14:33
Updated my answer accordingly about pitfalls. I didn't mention pros/cons because I think we're more talking about best practices here, especially when recommended and explained by the Angular team. – ngasull Apr 22 '14 at 14:44
1

" I didn't mention pros/cons because I think we're more talking about best practices here, especially when recommended and explained by the Angular team." huh? :) – Alexander Mills Jul 06 '17 at 22:01

score 49 · Answer 3 · edited Nov 14 '16 at 19:56

49

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

Here is the documentation link.

edited Nov 14 '16 at 19:56

Community

1
1

answered Apr 24 '15 at 07:53

nikunj gandhi

779
5
6

simple and clean – Gaurav_0093 Feb 08 '18 at 12:29

Jack Allan · Answer 4 · 2014-04-22T14:20:03.007

7

Element is not supported in IE8 out of the box you have to do some work to make IE8 accept custom tags.

One advantage of using an attribute over an element is that you can apply multiple directives to the same DOM node. This is particularly handy for things like form controls where you can highlight, disable, or add labels etc. with additional attributes without having to wrap the element in a bunch of tags.

edited Apr 22 '14 at 14:20

answered Apr 22 '14 at 13:30

Jack Allan

14,554
11
45
57

score 5 · Answer 5 · answered Apr 22 '14 at 13:29

One of the pitfalls as I know is IE problem with custom elements. As quoted from the docs:

3) you do not use custom element tags such as (use the attribute version instead)

4) if you do use custom element tags, then you must take these steps to make IE 8 and below happy

<!doctype html>
  <html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">
    <head>
      <!--[if lte IE 8]>
        <script>
          document.createElement('ng-include');
          document.createElement('ng-pluralize');
          document.createElement('ng-view');

          // Optionally these for CSS
          document.createElement('ng:include');
          document.createElement('ng:pluralize');
          document.createElement('ng:view');
        </script>
      <![endif]-->
    </head>
    <body>
      ...
    </body>
  </html>

score 4 · Answer 6 · answered Apr 22 '14 at 13:32

4

Pitfall:

Using your own html element like <my-directive></my-directive> wont work on IE8 without workaround (https://docs.angularjs.org/guide/ie)
Using your own html elements will make html validation fail.
Directives with equal one parameter can done like this:

<div data-my-directive="ValueOfTheFirstParameter"></div>

Instead of this:

<my-directive my-param="ValueOfTheFirstParameter"></my-directive>

We dont use custom html elements, because if this 2 facts.

Every directive by third party framework can be written in two ways:

<my-directive></my-directive>

or

<div data-my-directive></div>

does the same.

answered Apr 22 '14 at 13:32

Konstantin Krass

8,626
1
18
24

1

if you want to create a directive with equal 1 scope parameter, it's easier to do it with A. Because you dont have to create an additional attribute. – Konstantin Krass Apr 22 '14 at 14:01
What do you mean by additional? Both alternatives have exactly one attribute. – a better oliver Apr 22 '14 at 14:04

score 2 · Answer 7 · answered Apr 22 '14 at 13:31

2

2 problems with elements:

Bad support with old browsers.
SEO - Google's engine doesn't like them.

Use Attributes.

answered Apr 22 '14 at 13:31

Amir Popovich

29,350
9
53
99

Directives as elements can cause SEO problem ? I'm surprised. And what about the `replace` attribute to `true`? – chalasr Dec 25 '15 at 14:59
1

These claims need references. Point 1 is fairly well-established elsewhere, but I'd love to see sources about Point 2. – rinogo Sep 08 '16 at 16:24

AngularJS Directive Restrict A vs E

7 Answers7

Linked