javascript - 重复 Angular ng-transclude 范围

Question

我刚开始研究 AngularJS 并尝试使用多个插槽嵌入来实现自定义表指令。并面临范围未转移到嵌入的情况。在其他 StackOverflow 问题中有很多解决方案，但所有这些解决方案仅在指令模板中 ng-repeat 出现在顶部元素时才有效，但我的情况并非如此。至少我不能采用所有这些解决方案。

简化版。指令:

<span>
  <div>Some pagination</div>
  <div style="display: inline"><input type="text" placeholder="Search"/></div>
  <div style="display: inline">Some filters</div>

  <table>
    <tbody>
      <tr ng-repeat="line in lines" ng-transclude="row">
      </tr>
    </tbody>
  </table>

  <div>Some pagination again</div>
</span>

指令的使用:

<my-table>
     <row>
          <td>{{line.col1}}</td>
          <td>{{line.col2}}</td>
      </row>
</my-table>

Plunkr 上脚本的完整示例: https://plnkr.co/edit/rg43ZdPMGHLBJCTLOoLC

非常感谢任何建议。

Answer 1

在嵌入模板中直接引用由 ng-repeat 创建的 $scope 对象的最简单且可能是最干净的方法是通过 $parent属性:

<my-table>
  <td>{{$parent.line.col1}}</td>
  <td>{{$parent.line.col2}}</td>
</my-table>

为嵌入模板创建的 $scope 的 $parent 属性指向该模板所在的目标模板的 $scope最终被嵌入(在本例中为 ng-repeat)，即使这样被嵌入的 $scope 结果不是通常意义上的目标 $scope 的子级的嵌入。参见 this wonderful blog post对此进行更完整的讨论。

工作插件:https://plnkr.co/edit/LoqIMiQVZKlTt5epDnZF?p=preview .