要求模板的多个指令

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.

Answer 4

对我来说，它在index.html中包含了两次相同的指令。

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

Answer 6

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.

Answer 7

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>

Answer 8

在我的情况下，我在BundleConfig中引用了一个丢失的文件，我删除了引用并开始工作。

Answer 9

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.

Answer 10

它也可能是一个简单的错误，例如将template和templateUrl属性保存在同一个指令中。

Answer 11

(in case it helps someone else)

For me the issue was having a backup file (ie .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.

Answer 12

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

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

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

Answer 13

多次导入同一指令可能会导致此问题。