Multiple directives asking for templates on

Question

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/

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

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

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