Question

指令是否需要自己？这是一个example：

app.directive('menu', function () {
  return {
    restrict: 'E',
    require: '?^menu',
    link: function(scope, element, attrs, ctrl) {
      console.log('ctrl: ', ctrl);

      if (ctrl) {
        element.addClass('nested');
      } else {
        element.addClass('notnested');
      }
    }
  };
});

在我的测试中，它似乎不起作用（ ctrl 总是未定义）。请参阅 plunk

BTW，在回答了这个问题后，我发现在这种情况下插入符号（^）没有效果，传递给链接函数的控制器始终是实例自己的控制器。 [ plunk ]

Answer 1

您应该直接定义控制器函数以将指令API公开给其他指令：

app.directive('menu', function () {
  return {
    restrict: 'E',
    require: '?^menu',
    controller: function($scope){  },
    link: function(scope, element, attrs, ctrl) {
      console.log('ctrl: ', ctrl);

      if (ctrl) {
        element.addClass('nested');
      } else {
        element.addClass('notnested');
      }
    }
  };
});

请参阅http://plnkr.co/edit/cKFuS1lET56VOOYD5rrd?p=preview

Answer 2

使用 angular 1.4x ，您实际上现在可以将require语句限制为父元素 仅并排除元素本身。如果你改变了 require: '?^menu'至require: '?^^menu'（注意第二个插入符号），以便

app.directive('menu', function () {
  return {
    restrict: 'E',
    require: '?^^menu',
    controller: function($scope){  },
    link: function(scope, element, attrs, ctrl) {
      console.log('ctrl: ', ctrl);

      if (ctrl) {
        element.addClass('nested');
      } else {
        element.addClass('notnested');
      }
    }
  };
});

代码现在按预期工作。

请参阅http://plnkr.co/edit/2uDUO0LcgDX7xEuBtsJ2?p=preview

Answer 3

我想这里的问题不在于引用自身的指令。在指定或定义之前，该指令不知道要引用哪个控制器。要访问控制器，必须在指令中定义或引用它，如下所示。

app.directive('menu', function () {
  return {
    restrict: 'E',
    controller: 'MainCtrl',
    require: ['?^menu'],
    link: function(scope, element, attrs, ctrl) {
      console.log('ctrl: ', ctrl[0]);
      if (ctrl) {
        element.addClass('nested');
      } else {
        element.addClass('notnested');
      }
    }
  };
});

一个angularjs指令可以要求自己吗？

3 个答案: