Multiple directives asking for templates on

Question

I have the following HTML:

  

        
                      

              相关标签:
       
      

Answer 1

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 2

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

Answer 3

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 4

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 5

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

Answer 6

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.