动态地将一个指令包含在另一个指令中

Question

我有一个名为table-div的指令，它呈现表的头部和主体。其中的每一行都可以添加或不添加一些额外的功能。如果它有这种能力，那么应该包括一个自定义指令来打印一些数据，并链接到它的父指令的作用域。

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>

这将如何实现?基本上，问题是以某种方式连接那个保存指令名称的变量，并以某种方式计算它，以实际显示指令。

Answer 1

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

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

{{指令}}实际上是一个指向模板的url。

然后我的editAvailable指令应该是

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

我必须创建一个editavailabectrl，它的行为就像一个指令(意味着它有dom交互以及)。

我找不到另一种方法来解决这个问题，但它似乎工作正常，它允许我动态加载模板。重要的是要注意，editavailablecl $作用域将继承父作用域，从而为您提供了很大的灵活性。

我愿意接受建议，也许这不是一个好的做法，但它确实为我工作。