AngularJS 指令限制

Question

我在过去一周制定了一些 AngularJS 指令，它们都有效，但这个无效，我不知道我做错了什么..

这就是我所说的指令：

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();
          });
      }
  }
}]);

这是我的 HTML 代码，我在其中调用指令：

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

您看到代码中有什么问题吗？或者您知道为什么它不起作用吗？

Answer 1

您需要将限制字段更改为 '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

Answer 2

在不知道它实际给出什么错误的情况下，您的问题很可能是您的指令声明。

没有restrict: I。 Angular 仅支持三个值：

A - 只匹配属性名 E - 只匹配元素名称 C - 仅匹配 class 名称

您可以将这三者任意组合以支持多种情况。

文档：https://docs.angularjs.org/guide/directive#template-expanding-directive 它说明了 template expanding directive 部分底部的信息。

Answer 3

可用的 restrict 选项有：'E'、'A'、'C'、'M'

其中一个 EACM 将指令限制为特定的指令声明样式。

您甚至可以对同一指令使用多个限制restrict: 'AC'

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

E - 元素名称（默认）：<my-directive></my-directive>

A - 属性（默认）：<div my-directive="exp"></div>

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

M - 评论：

例如：

ng-if 限制为 'A'。所以它只能用作属性，不能用作注释或元素

这是 ngIf

的 angularjs 代码

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

AngularJS 指令限制

AngularJS directive restrict

javascript

directive

angularjs