Together with a great team of Office UI Fabric enthusiasts I’m working on building Angular Directives for the Office UI Fabric. Check out the Github repository for more information.

As part of web applications I’ve built, we’ve been using Angular more and more in the last couple of years. Angular allows you to build custom directives, in most cases used to create new HTML elements. In the light of the Office UI Fabric, I have for example built directives for the Textfield, Toggle, and Dropdown control. With the latest one, the Dropdown control, I’ve ran into a very weird issue with transclusion.

The specification of the dropdown control is as follows:

<uif-dropdown ng-model='scopeProp' disabled></pre>
<pre><uif-option ng-repeat='option in options' ng-value='option.value'>{{option.text}}</uif-option>
</uif-dropdown>

I’ve built two directives, uif-dropdown and uif-option. There are multiple ways to achieve the nesting of custom directives, I thought transclusion would be the cleanest one as that does not require DOM manipulation inside the directive. Transclusion (which uses the built-in Angular directive ngTransclude) in a directive allows you to inject the child elements of your directive into the template. The template would look something like this:

<div><select><ng-transclude/></select></div>

Above, however, did not work! The select would be just empty. When I changed my template to:

<div><ul><ng-transclude/></ul></div>

Everything worked fine… But, I wanted to use <select>. I have Googled if anyone else had this issue. Some posts suggested this was a bug, but apparently was fixed. Then I found the solution. The ngTransclude directive can be used as either an element, or as an attribute. The following works too:

<div><select ng-transclude/></div>

I guess it’s because <select> is a directive in Angular as well. Not sure. May be I’m doing something wrong, but it seems like a bug to me.

See a Fiddle which proves it too: https://jsfiddle.net/k7x2dqe6/