Angular: difference when using template or templateUrl

Question

I'm running into a strange issue when using the template attribute instead of the templateUrl one.

In case of the latter, I can define multiple directives with isolated scope or the transclude option on a single element. This works as expected and I don't get any errors.

However when simply copying the template and setting it to template in the directive, Angular suddenly starts complaining about multiple directives requesting isolated scope or transclusion on the same element.

See this plunkr of mine. It throws an error in the console. However, if you would replace (in scripts.js)

template: "<ul kendo-menu k-orientation=\"'vertical'\" k-direction=\"'right'\"></ul>",

with

templateUrl: 'menu.html'

the directive works (try right clicking on the text). The content of the HTML file is exactly the same as in the string.

Has anyone got the slightest clue why this inconsistency occurs?

Edit: to avoid confusion, I need the transclude option to be there as I'd like to reuse this element and be able to configure what elements to shown on each place it is used separately.

Answer 1

Apparently this inconsistency has been fixed in the newer versions of Angular.

We're using 1.0.8 and the correct behaviour (throwing the error when multiple directives require transclusion on the same element) only occurs when using the template option. When using the templateUrl option, the error is not thrown and the directive works as expected (which still boggles my mind)

Edit: fixed it using the compile function and removing the replace option. Working example here.

Answer 2

I am unable to reproduce the issue, but the problem here actually is replace: true in the definition of the menu directive.

This means that both kendo and the menu directive are trying to replace the element in turn. Preserving the menu wrapper fixes the problem: http://plnkr.co/edit/vGhEVNfz35elCtxXSMxO?p=preview

Answer 3

The problem came from transclude: true and you also forgot to add your <li> elements in your template. If replace: true is defined, it will replace the orginal element with its children.

It's working for me, whether using template or templateUrl : Updated Plunker

EDIT: There's an open issue about this: https://github.com/angular/angular.js/issues/4357