AngularJS Directive's restrict key defines how a directive can be used in HTML. In this post, we will see all possible configuration options using restrict.
A : Specifies that Directive will be used as an attribute, like <div item-widget></div>, as was done in last example. This is also the default behavior if restrict is not declared. Preferred if just modifying the behavior of existing elements.
E : Specifies that Directive will be used as an Element. Like <item-widget></item-widget>. Preferred if creating new content.
These keys can be combined. Best practices suggest to use only A & E types.
Thanks to above configuration, now our directive can be used both as <item-widget></item-widget> & <div item-widget></div >. No additional changes.
Shown below is the directive's content[saleItem.html].
That's it for restrict option. Let's move to next configuration option [scope] of Directive Definition Object, which helps us make reusable directives.