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指令a上的b控制器在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的用户现在必须知道这样的属性是“神奇地”可用的。这使得HTML在不了解a：

的情况下具有较低的可读性

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

<强>附录

根据您的使用情况，可能还有其他更合适的方法。当a和b独立时，以及a使用其内容允许其用户指定某个模板时，上述方法效果更佳。

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

最后，如果a具有明确定义的结构，则应使用其template来指定b。在您的示例中，可以使用模板轻松实现此目的。

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

1 个答案: