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