AngularJS directive restrict

Question

I made some AngularJS directives in the past week and they all work but this one just won't work and I don't know what I am doing wrong..

This is the directive I'm talking about:

app.directive('idleCheck', [function () {
  return {
      restrict: 'I',
      link: function (scope, elem, attrs) {
          ifvisible.setIdleDuration(5);
          ifvisible.on("idle", function () {
              var div = document.getElementById('fullscreenWrap');
              div.style.cursor = 'none';
              stream.pause();
          });

          ifvisible.on("wakeup", function () {
              var div = document.getElementById('fullscreenWrap');
              div.style.cursor = 'auto';
              stream.resume();
          });
      }
  }
}]);

This is my HTML code where I call the directive:

<div id="fullscreenWrap" idle-check>
  ...
</div>

Do you see anything wrong in the code ? Or do you know why it isn't working ?

What exactly is the error is giving? Are all the directives declared the same? There is no restrict: I. There is only A - only matches attribute name, E - only matches element name, C - only matches class name. You can however give a combination of the three. — ste2425
– ste2425, Commented Sep 25, 2015 at 12:24
Directive only works with restrict type A,E and C. Change restrict: 'I',to restrict: 'A/C/E' — Ved
– Ved, Commented Sep 25, 2015 at 12:25

Niezborala · Accepted Answer · 2015-09-25 12:29:49Z

3

You need to change restrict field to 'A'.

The restrict option is typically set to:

'A' - only matches attribute name 'E' - only matches element name 'C' - only matches class name These restrictions can all be combined as needed:

'AEC' - matches either attribute or element or class name

Angular directive

answered Sep 25, 2015 at 12:29

Niezborala

1,8571 gold badge19 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vamsi · Accepted Answer · 2016-07-27 07:06:37Z

The restrict options available are: 'E','A','C','M'

One of EACM restricts the directive to a specific directive declaration style.

You can even use Multiple restrictions on same directive restrict: 'AC'

If you don't restrict any, the defaults (elements and attributes) are used.

E - Element name (default): <my-directive></my-directive>

A - Attribute (default): <div my-directive="exp"></div>

C - Class: <div class="my-directive: exp;"></div>

M - coMment: 

For Example:

ng-if is restricted to 'A'. so it can be used only as attribute, you can't use as comment or element

Here's the angularjs code for ngIf

var ngIfDirective = ['$animate', function($animate) {
  return {
    transclude: 'element',
    priority: 600,
    terminal: true,
    restrict: 'A',       // --> This means restricting to Attribute

Flexo - Save the data dump · Accepted Answer · 2015-09-27 06:44:31Z

1

Without knowing what error it is actually giving your issue is most likely your directive declaration.

There is no restrict: I. Angular only supports three values for this:

A - only matches attribute name E - only matches element name C - only matches class name

You can but any combination of the three though to support multiple cases.

Docs: https://docs.angularjs.org/guide/directive#template-expanding-directive It states the info at the bottom of the template expanding directive section.

edited Sep 27, 2015 at 6:44

Flexo - Save the data dump♦

89.1k22 gold badges205 silver badges286 bronze badges

answered Sep 25, 2015 at 12:30

ste2425

4,8473 gold badges26 silver badges39 bronze badges

Collectives™ on Stack Overflow

AngularJS directive restrict

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related