Question

所以在页面上我有3个角度自定义指令AA BB和CC。有时BB在AA内部

<AA>
  <BB></BB>
</AA>

其他时间BB在CC内部

<CC>
  <BB></BB>
</CC>

把它想象一下 1）我在预览查看器中显示BB 2）我在某种仪表板上显示BB 如果BB在指令AA或CC内，我想在BB的控制器内部进行检测。我可以检查网址（$ location）中的路径 - 但也许有另一种方式？

Answer 1

如果是您自己的指令，您可以在范围上附加属性。从子指令，如果它不是隔离范围，您可以遍历范围链并确定该属性是否存在。

或者，您将DOM向上移动到body元素，并检查指令元素。

很快就会有例子......

Answer 2

在指令声明的返回值中使用require键。

require: '^myTabs',

以下是AngularJS网站的示例：

app.directive('myPane', function() {
return {
  require: '^myTabs'
 }

http://plnkr.co/edit/KR9bgWesS8pl8Qq06aJq?p=preview

还有一篇文章解释了这种指令的沟通。

https://thinkster.io/a-better-way-to-learn-angularjs/directive-to-directive-communication

Answer 3

好的，要扩展我的评论，如果你在你的指令中使用require，你可以传入一组指令名称，如果这些名称设置为可选，如果必需的指令，它不会抛出错误找不到。相反，它只会在controllers数组中返回undefined。将所需的控制器设置为可选的是通过在指令的名称前面加上?来完成的。插入符^告诉它通过搜索元素及其父元素来定位所需的控制器。从1.3开始，您甚至可以使用^^来尝试通过仅搜索元素的父元素来定位所需的控制器（因此，使用此元素时，您不能在同一元素上同时使用这两个指令）。

因此，你可以这样做：

app.directive('BB', function() {
return {
  require: ['?^AA','?CC'],
  link: function(scope, element, attrs, controllers) {
     parent = controllers[0] ? 'AA' : 'CC';
     alert(parent);
  }
}

如何检测指令B在指令A中

3 个答案: