Usage inside a custom directive

[jbonigomes]

I am using angular-ui/ui-select inside a custom angular directive, when I first load the page, or do a full browser refresh, the dropdown menu does not appear when I click the dropdown arrow. However, if I navigate to another state (yes I'm using ui-router) then go back to the state that has the dropdown, the dropdown works just fine. Here are a couple of observations:

• I tried using both prototypal inheritance and an isolated scope for my directive, but in both cases, the erroneous behaviour is present.
• I moved the dropdown outside the directive and it works just fine.

Does anybody know what I am doing wrong or went through the same problem?

Thanks

[ma-zal]

Same issue. If ui-select is used directly without directive, all works. If it is inside directive, dropdown fails.

[jbonigomes]

Another observation, when serving from my dist folder, where the templates have been prefetched inside js blocks, it works fine.

[ma-zal]

Thanks @jbonigomes. Workaround is to preload template on app loading:

angular.module('myApp').run(function($templateRequest) {
    $templateRequest('components/parts/directive-template-with-ui-select.html', true);
});

[jbonigomes]

thanks @ma-zal it works for me, however it would still be nice not having to do it, not sure if I should close the issue

[ma-zal]

To @jbonigomes: This is a bug. Don't close this issue. It is my opinion.

[jbonigomes]

thanks

[user378230]

I believe template loading issues were resolved in #1430

If the issues is still relevant please update with tests against the latest version of ui-select.