Search code examples
angularjstemplateskendo-uitransclusion

Angular: difference when using template or templateUrl


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.


Solution

  • 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.