AngularJS: How to transclude multiple directives?

Question

(1) I have a transcluding directive called portlet which takes its content and wraps it in some boilerplate code. E.g:

<portlet>
  <div class="foobar">My content</div>
</portlet>

goes through the template of portlet, which is:

<div class="portlet">
  <div class="icon"></div>
  <div class="content" ng-transclude="">          
  </div>
</div>

And becomes:

<div class="portlet">
  <div class="icon"></div>
  <div class="content">
      <div class="foobar">My content</div> <!--the original content
                                         passed to portlet-->
  </div>

(2) I have two more directives, dyn-form and dyn-form-field. Described in this way:

<dyn-form>
   <dyn-form-field type="textbox" placeholder="..." label="Name" />
   <! ...and so on... -->
</dyn>

dyn-form's template:

<form class="..." ng-transclude="">
</form>

Each dyn-field's template generates the html for producing the label / fields for it. So the original code is translated into something like this:

<form class="...">
  <label>Name: <input type="text" placeholder="..." /></label>
  <!- ....and so on... -->
 </form>

(3) Here's the problem. I want to use a 3rd directive, dyn-form-portlet for generating the boilerplate code for displaying some buttons shown above every form, then show a portlet, and put the dyn-form inside the portlet. This is how I'm trying to do this:

<dyn-form-portlet>
   <dyn-form>
     <dyn-form-field />
   </dyn-form>
</dyn-form-portlet>

dyn-form-portlet's template looks like this:

<div class="dyn-form-portlet">
  <button>Foo</button>
  <button>Bar</button>
  <portlet ng-transclude="">
  </portlet>
</div>      

Theoratically this should work, i.e <dyn-form> should be placed inside <portlet>, <dyn-form-field>s inside <dyn-form>, and so on. But when I run this, I only see the buttons displayed by dyn-form-portlet and the code for portlet, but portlet is empty and the form is not being displayed in it.

Am I doing something wrong, or is this a bug?

Answer 1

I've managed to fix that. I used transclude : 'element' along with replace : true on portlet directive and I've given it priority higher than other directives. The reason why I did that is rather feeling than deep knowledge of anuglar inner workings.

About first part transclude : 'element' is used because

'element' - transclude the whole element including any directives defined at lower priority.

Replace is used because from what I've seen it's always used when transclude is set to element. Priority was my hunch.

Here is the plnkr http://plnkr.co/edit/axQ90dHOLmLNeNQ4ZlNl?p=preview

This probably is not the answer you were looking for but I would need to look deeply into angular directives to really understand what's going on. Anyways, it's not a bug, it's just poor documentation.