4

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.

thomaux
  • 19,133
  • 10
  • 76
  • 103
  • I'm not familiar with kendo-ui but this template seems to need to be compiled, right? – glepretre Feb 19 '14 at 15:36
  • @glepretre kendo is only used to render the menu component. The template itself is standard angular, so you don't need to precompile it for it to be able to work. Thanks for taking a look at my question! – thomaux Feb 19 '14 at 17:38

3 Answers3

1

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

musically_ut
  • 34,028
  • 8
  • 94
  • 106
  • Thanks for your answer, but removing the replace doesn't fix the issue. Angular won't throw an error, but the directive won't work. The strange thing is that when using `templateUrl` instead and keeping the `replace` option, the directive works. – thomaux Feb 19 '14 at 17:37
1

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

glepretre
  • 8,154
  • 5
  • 43
  • 57
  • Thanks for your answer. I need the `transclude` option though, because I'd like to be able to define what should be shown on the menu wherever it is used. – thomaux Feb 19 '14 at 19:55
  • Hmm. is it solved with Angular latest stable version? I edited my answer to add a link to the open issue ;) – glepretre Feb 20 '14 at 07:41
  • Thanks for the link! The issue I was having (namely the inconsistency) is fixed though in the latest version. – thomaux Feb 20 '14 at 08:02
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.

thomaux
  • 19,133
  • 10
  • 76
  • 103