Best IT Recipes

AngularJS Directive A vs E Restriction

I work in a small team, creating in AngularJS and trying to maintain some basic standards and best practices; especially considering that we are relatively new with Angular.

My question is about directives. More precisely, restrict parameters.

Some of us use restrict: 'E' , having <my-directive></my-directive> in html.

Others use restrict: 'A' and have <div my-directive></div> in html.

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

This does not really matter at the moment, although when this project is as big as it is going to be, I would like someone to look at it to easily understand what is happening.

Are there any pros / cons for an attribute or element capable of doing something?

Are there any pitfalls we need to know if you select the say attribute above the attribute?

+80
javascript html angularjs
Apr 22 '14 at 13:24
source share
8 answers

According to the documentation :

When should an attribute be used in comparison with an element? Use an element when you create a component that controls the template. A common case for this is when you create a domain language for parts of your template. Use the attribute when you are decorating an existing element with new features.

Edit the following trap comment for a complete answer:

Assuming that you are creating an application that should run in Internet Explorer <= 8, which support has been disabled by the AngularJS team from AngularJS 1.3, you need to follow these instructions to make it work: https://docs.angularjs.org/guide/ ie

+75
Apr 22 '14 at 13:28
source share

A constraint is a directive type definition, and it can be A (attribute), C (class), E (element) and M (coMment), let's say that the name of the Doc directive is:

Type: Use

A = <div Doc></div>

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

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

M = <!--directive:Doc -->

+108
Oct. 23 '15 at 13:53 on
source share

The restriction parameter usually matters:

  • 'A' - matches only attribute name
  • 'E' - matches only the name of the element
  • 'C' - matches only the class name
  • 'M' - matches only comments

Here's the link .

+34
Apr 24 '15 at 7:53
source share

The item is not supported in IE8 out of the box, you need to do some work for IE8 to accept custom tags.

One of the advantages of using an attribute over an element is that you can apply multiple directives to the same DOM node. This is especially convenient for things like form controls where you can highlight, disable, or add shortcuts, etc. With additional attributes without the need to wrap an element in a bunch of tags.

+6
Apr 22 '14 at 13:30
source share

One of the pitfalls, as I know, is the IE problem with custom elements. As stated in the docs :

3) you do not use custom element tags such as (use instead).

4) if you use custom element tags then you should take the following steps: 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>
+4
Apr 22 '14 at 13:29
source share

Pitfall:

  • Using a native html element such as <my-directive></my-directive> will not work in IE8 without going around ( https://docs.angularjs.org/guide/ie )
  • Using your own html elements will cause the html check to fail.
  • Directives with an equal one parameter can be executed as follows:

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

Instead of this:

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

We dont use custom html elements because if these are two facts.

Each directive of a third-party structure can be written in two ways:

<my-directive></my-directive>

or

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

does the same thing.

+4
Apr 22 '14 at 13:32
source share

Legal restrictions:

  • E for item name
  • And for the attribute
  • C for class
  • M for comments

The default value is EA , which means that both element names and attribute names can invoke the directive.

+4
Jan 04 '17 at 11:53 on
source share

2 problems with elements:

  • Poor support with older browsers.
  • SEO - Google engine they do not like.

Use attributes.

+3
Apr 22 '14 at
source share


More articles:


All Articles