Multiple directives asking for templates on

问题:

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/

回答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.

回答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.

回答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.

回答4:

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

回答5:

The resizable directive is incorrect. The ng-transclude directive must be applied to the innermost element, because its content will be discarded and replaced with transcluded content.

You should surround tbox directive template with (corrected) resizable element directive. I dont' know what editoptions attribute does, but if it's also a directive, then it also shouldn't have a template.

I mean something like this:

appModule.directive('resizable', function($compile, $document) {     return {         restrict: "E",         template: '<div ng-style="{top:tb.x, left:tb.y, height:tb.height, width:tb.width}"  ng-transclude></div>',         transclude: true,         replace: true,         //...  appModule.directive('tbox', function($document) {     return {         restrict: "E",         template: '<resizable><div class="editbox" editoptions>{{tb.text}}</div></resizable>',         replace: true,         //... 

Result:

<div ng-style="{top:tb.x, left:tb.y, height:tb.height, width:tb.width}"  ng-transclude>     <div class="editbox" editoptions>{{tb.text}}</div> </div> 

回答6:

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.

回答7:

In my case, I had a reference to a missing file in the BundleConfig, I removed the reference and it started to work.

回答8:

For me there were no duplicates in my code. This happend as a result of me duplicating a module to get a headstart on the new one, and then doing a module wide find/replace and changing the names of the files.

Even though there was no duplicate anymore, and I stopped and started the browsersync based server, the error continued.

Resolving it was done by removing the .tmp directory that the build system was creating for the dev environment.

Evidently the FountainJS generator I'm using creates a build system that leaves the .tmp directory dirty in some cases like this. It's caught me a few times now.

回答9:

For Visual Studio users using TypeScript, this got me. I'd renamed my typescript file and the built .js file was in the directory (but it doesn't show up in the project). I had to show all files in the directory to remove the lingering unused *.js files.

回答10:

It can also be a simple mistake like keeping both template and templateUrl properties in the same directive.

回答11:

(in case it helps someone else)

For me the issue was having a backup file (i.e. .bkp.html) which was just an old copy of a template I was using for reference - but this was being included by karma since it matched the ".../**/*.html" pattern.

回答12:

You can’t have one (element) directive directly referencing another (element) directive. Wrap it with a <div>, e.g:

template: '<div><my-custom-directive>'         + '</my-custom-directive></div>' 

See https://github.com/angular/angular.js/issues/5428 for more information.

回答13:

importing same directive more than one time can cause this issue.

文章来源: Multiple directives asking for templates on