AngularJS：从父指令隔离范围继承的子指令范围？

Question

如果a 和b 是我的指令，那么b 是a 的子元素：

<a>
  <b></b>
</a>

如果a 有一个独立的作用域，那么b 是否可以继承它？

示例js：

app.directive('a', function () {
  return {
    restrict: 'E',
    scope: {},
    controller: function ($scope) {
      $scope.prop1 = ...
    }
  }
});
app.directive('b', function () {
  return {
    restrict: 'E',
    controller: function ($scope) {
      //how to access $scope.prop1 here?
    }
  }
});

有了这个，我正在尝试制作可重用的指令，并且应该在彼此之间嵌套使用。

我知道我可以 require 指令 b 上的 a 控制器在 b 的链接功能中访问它，作为在控制器之间共享数据的一种方式，但这种方法不起作用如果我有不止一层的嵌套，那就太好了。

Answer 1

这是您需要使用手动嵌入功能的地方。如果父指令具有隔离作用域，则子 DOM 元素（及其指令）不会从它继承（仅当它们在其模板中时）。

嵌入时，可以显式指定范围：

.directive("a", function(){
  return {
    scope: {},
    transclude: true,
    link: function(scope, element, attrs, ctrls, transclude){
       var newScope = scope.$new();
       transclude(newScope, function(clone){
         element.append(clone);
       })
    }
  };
});

不过，您应该注意，尽管上述方法可行（从某种意义上说，子指令的范围将继承父指令的隔离范围），但对于您的指令的用户来说，这也是一种有些混乱的体验。

要了解原因，假设a 在其范围内公开了一些$innerProp。 a 的用户现在必须知道这样的属性是“神奇地”可用的。在不了解a 的情况下，这会降低 HTML 的可读性：

<a>
  <b item="$innerProp"></b>
</a>

附录

根据您的用例，可能还有其他更合适的方法。当a 和b 是独立的并且a 使用其内容允许其用户指定一些模板时，上述方法效果更好。

如果b 仅（或大部分）用作a 的子级，那么它应该require 它。 a 可以通过其控制器 API 向 b 公开它需要的任何内容。

最后，如果a 具有明确定义的结构，那么它应该使用其template 来指定b。在您的示例中，这可以通过模板轻松实现。