AngularJS: How to transclude multiple directives?
angularjs, javascript
Solution
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.
Problem
(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?