1

We've been avoiding to restrict Angularjs directives to classes. Mostly because we found some sources which advised against it (including John Papas opinionated styleguide). At the same time we've been avoiding restricting it to elements since it would be in conflict with the W3C standards. (We're purists like that).

So, all we've been using is the restrict to attribute (no, we're not going to talk about the comment method). Which works fine in most cases but seems too loose when deploying a concrete object. E.G. A sidebar. This as well as that the replace: true option will be deprecated, made me wonder why not use the restrict to class anyway. It seems to make sense:

<nav class="maarten-sidebar">
    <!-- sidebar directive content -->
</nav>

In comparison to:

<div data-maarten-sidebar>
    <!-- sidebar directive content -->
    <nav class="sidebar"></nav>
</div>

It plays nicely with our CSS files as well. With some research we found some people advise against it. But the main reasons why not are not very clear. So my question actually is: What are the pitfalls of using restrict: 'C'

Community
  • 1
  • 1
Maarten Bicknese
  • 1,498
  • 1
  • 14
  • 27
  • Besides other reasons I think it's more concise to use actual elements and attributes for stating that this is a piece of JS logic - custom directive. That clearly visible in the code and safer then classes that could be messed by HTML/CSS coder. – shershen Feb 20 '16 at 14:48
  • javascript development has always pushed the specs. Modern browsers have all sorts of things in them that are ahead of live specs. Using class for all your directives should be last choice, not first. Why mix business with style? – charlietfl Feb 20 '16 at 15:46

1 Answers1

2

There are a few reasons why restrict: 'E' is generally considered best practice for directives with templates (called 'components' in Angular 2, and encouraged by the new component directive in Angular 1). The reasons are really just about readability and consistency, but I think they are convincing nonetheless.

The main reason is precisely because it conflicts with W3C standards. According to the standards, elements may not contain separate words delimited by a dash. AngularJS encourages developers to use a dash somewhere in the directive name. So, when you see an element with a dash in it, you immediately know it is an Angular directive rather than a standard HTML element. Thus, using restrict: 'E' ends up being more readable and expressive.

Now, for directives without templates (plain old 'directives' in Angular 2), restrict: 'A' is generally preferred. Most HTML attributes do not contain a dash, although there is nothing in the W3C standard that says they can't. The main reason seems to be that they confer a behavior on the element, rather than simply applying a visual style, as do many HTML attributes (e.g. onclick). Furthermore, if the directive takes inputs, you will probably bind the inputs through custom attributes, like so: <nav expandable-nav expanded="false"></nav>. This, on the other hand, seems quite confusing: <nav class="expandable-nav" expanded="false"></nav>.

Finally, perhaps the main reason to go with the flow on this is that they are enforced in Angular 2. Inevitably, Angular 2 will be the next big thing, and Angular 1 has been moving in a more Angular-2-ish direction anyway (e.g. with the component directive). Be prepared...

McMath
  • 6,862
  • 2
  • 28
  • 33
  • Seeing Google is behind AngularJS, is it save to assume that using directives as elements won't hurt your SEO? – Maarten Bicknese Feb 20 '16 at 16:16
  • @MaartenBicknese I don't claim to be an expert on the relationship between Angular and SEO, but there is an extensive discussion about it [here](http://stackoverflow.com/questions/13499040/how-do-search-engines-deal-with-angularjs-applications). It seems that you wouldn't have been safe to assume that a few years ago, but now you should be fine. – McMath Feb 20 '16 at 16:26