AngularJS Directive Restrict A vs E
angularjs, html, javascript
Solution
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
Problem
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?