AngularJS Directive Restrict A vs E

Question

I m working in a small team  building in AngularJS and trying to maintain some basic standards  amp  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  lt my-directive gt  lt  my-directive gt  in the html   Others are using restrict   A  and having  lt div my-directive gt  lt  div gt  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

User · Answer

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

User · Answer

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  lt   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

User · Answer

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    lt  doctype html gt     lt html xmlns ng  http   angularjs org  id  ng-app  ng-app  optionalModuleName  gt       lt head gt         lt  -- if lte IE 8  gt           lt script gt            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             lt  script gt         lt   endif -- gt       lt  head gt       lt body gt                 lt  body gt     lt  html gt

User · Answer

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

User · Answer

Pitfall    Using your own html element like  lt my-directive gt  lt  my-directive gt  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     lt div data-my-directive  ValueOfTheFirstParameter  gt  lt  div gt   Instead of this    lt my-directive my-param  ValueOfTheFirstParameter  gt  lt  my-directive gt   We dont use custom html elements  because if this 2 facts    Every directive by third party framework can be written in two ways     lt my-directive gt  lt  my-directive gt   or    lt div data-my-directive gt  lt  div gt   does the same

User · Answer

2 problems with elements    Bad support with old browsers  SEO - Google s engine doesn t like them    Use Attributes

User · Answer

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       lt div Doc gt  lt  div gt  C       lt div class  quot Doc quot  gt  lt  div gt  E       lt Doc data  quot book data quot  gt  lt  Doc gt  M       lt  --directive Doc -- gt

[javascript] AngularJS Directive Restrict A vs E

Examples related to javascript

Examples related to html

Examples related to angularjs