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

Question

I have a directive called table-div which renders the header and body of a table. Each row within tbody could add some extra functionality or not. In case it has this ability then a custom directive should be included to print out some data and be linked to the scope of its parent directive.

The table-div directive:

<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>

My table-div-row directive looks along the lines of this

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

And my editAvailable directive looks like this

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

How would this be achieved ? Basically the problem is somehow linking that variable which holds the directive name and evaluate it somehow to actually display the directive. Is this possible ?

Answer 1

Found out that I can use ng-include directive to include an template file. Basically my table-div-row would look like

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

the {{directive}} would be actually a url to a template.

And then my editAvailable "directive" would look like

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

I have to create an EditAvailableCtrl which acts like a directive (meaning it has dom interactions as well).

I couldn't find another way to this solution but it seems to be working properly and it allows me to dynamically load templates. It is important to note that EditAvailableCtrl $scope will inherit from the parent scope so that gives you a lot of flexibility.

I am open to suggestions, maybe this is not a good practice but it does the work for me.