Question

我有一个名为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>

如何实现这一目标？基本上问题是以某种方式链接保存指令名称的变量并以某种方式评估它以实际显示指令。这可能吗？

Answer 1

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

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

{{directive}}实际上是模板的网址。

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

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

我必须创建一个EditAvailableCtrl，它就像一个指令（意味着它也有dom交互）。

我找不到另一种方法来解决这个问题，但似乎工作正常，它允许我动态加载模板。值得注意的是，EditAvailableCtrl $ scope将从父作用域继承，这样可以提供很大的灵活性。

我愿意接受建议，也许这不是一个好的做法，但它可以帮助我。

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

1 个答案: