Multiple directives asking for templates on

javascript angularjs angularjs-directive

40,925

Solution 1

Both of your directives are trying to replace the element in the dom. Try removing the the replace: true lines in your directive definition object.

Solution 2

The same error may occur if you try to load the same directive code more than once by mistake. It may happen especially when you keep every Angular item (like directive) in separate file and you include every single one with separate line. That was my case.

Solution 3

For me, this was caused by multiple copies of the directive and template existing in the dist directory caused by grunt building without cleaning (during a watch task). A clean and rebuild solved this for me.

Solution 4

For me it was including the same directive twice in the index.html.

Solution 5

Happened to me when I was having two components with the same name (copy paste error):

For my coffeescript, but easy to happen in pure angular:

component1.coffee
    appModule.component('name', {
    templateUrl: '/public/partials/html1.html',
  controller: 'controler1',
  bindings: {
    somebindings: '<'
  }
});


component2.coffee
    appModule.component('name', {
    templateUrl: '/public/partials/html2.html',
  controller: 'controler2',
  bindings: {
    somebindings: '<'
  }
});

Conclusion: "name" has to be unique in whole app.

View more solutions

40,925

Author by

goh

Updated on July 09, 2022

Comments

goh almost 2 years

I have the following HTML:

<div style="border:1px solid; height:300px; width:500px; position:relative;  left:100px" id="canvas">
  <tbox ng-repeat="tb in textBoxes" ng-model="tb">
  </tbox>
</div>

And the following 2 directives

appModule.directive('resizable', function($compile, $document) {
  return {
    restrict: "A",
    template: '<div ng-style="{top:tb.x, left:tb.y, height:tb.height, width:tb.width}"  ng-transclude><span class="scale">s</span></div>',
    transclude: true,
    replace: true,
    require: 'ngModel'
  }
});

appModule.directive('tbox', function($document) {
  return {
    restrict: "E",
    template: '<div class="editbox" resizable editoptions>{{tb.text}}</div>',
    replace: true
  }
});

What exactly does the following error that angular is throwing me means?

Error: Multiple directives [tbox, resizable] asking for template on: <div class="editbox" resizable="" editoptions="" ng-repeat="tb in textBoxes" ng-model="tb">

jsfiddle at http://jsfiddle.net/sEZM3/

goh over 10 years

removing replace doesn't help
goh over 10 years

Hi Adam, essentially my aim is to create smaller manageable directives and combine them into larger directives. Regarding the ng-transclude, what I really wanna do is to wrap the template around the current existing dom element that has the resizable attribute. What would be the remedy?
thorn0 about 10 years

"Transclusion works only for element directives (restrict: 'E')" - that's not true.
Terafor almost 8 years

same problem here
pTK over 7 years

even I had the same issue, my temp folder (from where I serve) had two copies of the same directive. deleted one and it got fixed.
Lyubimov Roman over 7 years

Or somebody forget to rename directive name
Tim over 7 years

This was it for me. Copy/pasted some directive boilerplate and forgot to change the directive's name.
Tom over 7 years

In my case, I had a script in two separate bundles and on this page both bundles were being loaded.
Ramon about 7 years

Having them duplicated in index.html, for example
VictorySaber over 5 years

I should be able to upvote this twice as it has saved me yet again!
Anand Kadhi over 2 years

You are contradicting the reason why directive concept was made