angularjs - 有没有办法制作一个指令，使其只能在某个其他指令中使用？

Question

假设我有两个指令，my-awesome-table并且my-awesome-table-cell. 我永远不想my-awesome-table-cell在my-awesome-table指令之外使用。有没有办法强制执行？那么在my-awesome-table指令之外使用时会引发错误吗？

Answer 1

您也可以通过让外部指令在 DOM 上放置一个“控制器指令”然后让内部指令“要求”这个“控制器指令”来做到这一点。

请参阅此 Plunk：http://plnkr.co/edit/QPNPu4。

app.directive('myAwesomeTable', function() {
  return {
    controller: function($scope) {},
    link: function(scope, element) {
      ...
    }
  };
});

app.directive('myAwesomeTableCell', function() {
  return {
    require: '^myAwesomeTable',
    link: function(scope, element, attributes, controller) {
      ...
    }
  };
});

您还可以使用 ?^ 将要求设为可选，然后在链接函数内部检查正在定义的控制器参数是否需要对其进行细粒度控制。

Answer 2

这不应该是一个问题，假设您可以控制自己的代码......但是，在它成为一个问题的情况下，您可以检查您的链接函数以查看您的指令是否包含在正确的父指令中：

app.directive('testChild', function() {
  return {
    restrict: 'E',
    template: '<div>child</div>',
    link: function(scope, elem, attr){
      if(elem.parents('test').length === 0) {
        throw new Error('Must be inside test directive');
      }
    }
  };
});

app.directive('test', function(){ 
  return {
    restrict: 'E',
    transclude: true,
    template: '<div>' +
      '<h3>parent</h3>' +
      '<div ng-transclude></div>' +
    '</div>'    
  };
});

测试标记：

  <test>
    <test-child></test-child>
    <test-child></test-child>
  </test>
  <!-- this will throw an error in JS -->
  <test-child></test-child>

笔记

链接函数中的elem参数是一个 JQuery LITE 对象，除非您还引用 JQuery，否则它是一个完整的 JQuery 对象。JQuery Lite 没有.parents()功能。你仍然可以检查父母，但如果可能的话，我建议在这里使用 JQuery。

要知道的另一件事是错误的指令仍然会呈现，除非您elem.remove()在链接函数中使用摆脱它。

此外，如果您replace:true在父指令上使用，您将需要在其模板中放入一些东西来识别它，例如您可以通过parent()调用查询的类或属性。