AngularJS: How to translate several directives?

Question

(1) I have a transclude directive called portlet that takes its contents and wraps it with some kind of template. For example:

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

goes through the portlet template, which:

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

And will be:

 <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 dyn-form and dyn-form-field directives. Described in this way:

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

dyn-form template:

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

Each dyn-field template generates html to create a label / fields for it. So, the source code is converted to something like this:

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

(3) Here is the problem. I want to use the third dyn-form-portlet directive to generate the template code to display some of the buttons shown above each form, and then show the portlet and put the dyn-form inside the portlet. Here is how I am trying to do this:

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

dyn-form-portlet template is as follows:

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

Theoretically, this should work, i.e. <dyn-form> should be placed inside <portlet> , <dyn-form-field> inside <dyn-form> , etc. But when I run this, I see only the buttons displayed by dyn-form-portlet and the code for portlet , but portlet empty and the form does not appear in it.

Am I doing something wrong or is it a mistake?

Answer 1

I managed to fix it. I used transclude : 'element' along with the replace : true directive in the portlet , and I gave it priority higher than other directives. The reason I did this is felt rather than a deep knowledge of the internal working conditions.

About the first part of transclude : 'element' used because

'element' - to switch the entire element, including any directives defined at a lower priority.

Replace is used because from what I saw, it is always used when transclude is set to an element. The priority was my hunch.

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

This is probably not the answer you were looking for, but I will need to deeply examine the angular directives to really understand what is going on. In any case, this is not a mistake, it is just bad documentation.