Invalid restrict option for directiveJS-0523

What are directives?

At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform the DOM element and its children.

Why use restrict?

The developers choose the way our directive should be used in HTML, using restrict key of Directive Definition Object. The possible values for restrict (and so the ways in which we can use our directive) are:

• A : Specifies that Directive will be used as an attribute, e.g. <div item-widget></div>
• E : Specifies that Directive will be used as an element, e.g. <item-widget></item-widget>. Preferred if creating new content.
• C : Specifies that Directive can be used as class name in existing HTML elements, e.g. <div class="item-widget"></div>
• M : Specifies that Directive can be used as HTML comments, e.g.<!– Using directive: item-widget–>

Recommended

When creating a directive that makes sense as a stand-alone element, allow restrict E (custom element) and restrict A (custom attribute). It should be implemented as an element when it's stand-alone and as an attribute when it enhances its existing DOM element. While we can allow the directive to be used as a class, if the directive is truly acting as an element it makes more sense as an element or at least as an attribute. It is recommended to use AE restrict option.

Bad Practice

// Example 1
<div class="my-calendar-range"></div>

// Example 2
angular
    .module('app.widgets')
    .directive('myCalendarRange', myCalendarRange);

function myCalendarRange() {
    var directive = {
        link: link,
        templateUrl: '/template/is/located/here.html',
        restrict: 'C'
    };
    return directive;

    function link(scope, element, attrs) {
      /* */
    }
}

Recommended

// Example 1
<my-calendar-range></my-calendar-range>
<div my-calendar-range></div>

// Example 2
angular
    .module('app.widgets')
    .directive('myCalendarRange', myCalendarRange);

function myCalendarRange() {
    var directive = {
        link: link,
        templateUrl: '/template/is/located/here.html',
        restrict: 'EA'
    };
    return directive;

    function link(scope, element, attrs) {
      /* */
    }
}

References

• AngularJS Directive
• Directive Definition Object