首页 文章

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

提问于
浏览 次
2

如果 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 的链接功能中访问它作为在控制器之间共享数据的一种方式，但如果我有多个嵌套级别，那么这种方法效果不好 .

angularjs angularjs-directive angularjs-scope

1 回答

  • 2

    这是您需要使用手动转换功能的地方 . 如果父指令具有隔离范围，则子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 的用户现在必须知道这样的属性是"magically"可用 . 这使得HTML在不了解 a 的情况下具有较低的可读性：

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

    Addendum

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

    如果 b 仅被（或大部分）用作 a 的子元素，那么它应该 require . a 可以通过其控制器API将所需内容暴露给 b .

    最后，如果 a 具有定义良好的结构，则应使用其 template 指定 b . 在您的示例中，可以使用模板轻松实现 .

    回复于

相关问题