在另一个指令中动态包含一个指令答案

【问题标题】：Dynamically include a directive in another directive在另一个指令中动态包含一个指令
【发布时间】：2013-05-11 12:43:23
【问题描述】：

我有一个名为 table-div 的指令，它呈现表的标题和正文。 tbody 中的每一行都可以添加或不添加一些额外的功能。如果它具有此功能，则应包含自定义指令以打印出一些数据并链接到其父指令的范围。

table-div 指令：

<div>here is header</div>
<div ng-repeat="row in tbody">
   <table-div-row data="row"></table-div-row>
   <table-div-row data="row" directive="deletable"></table-div-row> 
   <table-div-row data="row" directive="editAvailable"></table-div-row>
</div>

我的 table-div-row 指令看起来像这样

<div>
  <p>some data here</p>
  <div class="{{directive}}"></div>
</div>

我的 editAvailable 指令看起来像这样

<div>
  <p> name: {{parentDirectiveScope.name}}</p>
  <button>edit</button>
  <button>save</button>
</div>

这将如何实现？基本上问题在于以某种方式链接保存指令名称的变量并以某种方式对其进行评估以实际显示指令。这可能吗？

【问题讨论】：

用类指令试过了吗？
这正是我尝试过的

标签： javascript angularjs angularjs-directive

【解决方案1】：

发现我可以使用 ng-include 指令来包含模板文件。基本上我的 table-div-row 看起来像

<div>
  <p>some data here</p>
  <ng-include src="{{directive}}"></ng-include>
</div>

{{directive}} 实际上是一个模板的 url。

然后我的 editAvailable “指令”看起来像

<div ng-controller="EditAvailableCtrl">
  <p> name: {{name}}</p>
  <button>edit</button>
  <button>save</button>
</div>

我必须创建一个类似于指令的 EditAvailableCtrl（这意味着它也具有 dom 交互）。

我找不到该解决方案的其他方法，但它似乎工作正常，它允许我动态加载模板。请务必注意，EditAvailableCtrl $scope 将从父范围继承，从而为您提供很大的灵活性。

我愿意接受建议，也许这不是一个好的做法，但它对我有用。

【讨论】：