Question

我有以下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>

以下2条指令

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
  }
});

角度给我带来的以下错误究竟是什么意思？

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

jsfiddle http://jsfiddle.net/sEZM3/

Answer 1

你的两个指令都试图替换dom中的元素。尝试删除指令定义对象中的replace: true行。

Answer 2

如果您尝试错误地多次加载相同的指令代码，则可能会发生同样的错误。特别是当你将每个Angular项目（如指令）保存在单独的文件中并且每个单独的行包含单独的行时，可能会发生这种情况。那是我的理由。

Answer 3

对我来说，这是由于 dist 目录中存在的指令和模板的多个副本引起的，这些副本是由没有清理的grunt构建引起的（在 watch 任务期间）。干净和重建为我解决了这个问题。

Answer 4

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

Answer 5

当我有两个具有相同名称的组件时（复制粘贴错误）发生在我身上：

对于我的coffeescript，但很容易发生纯粹的角度：

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: '<'
  }
});

结论：＆＃34; name＆＃34;必须在整个应用程序中独一无二。

Answer 6

对于使用TypeScript的Visual Studio用户，这让我感到高兴。我重新命名了我的打字稿文件，并且内置的.js文件位于目录中（但它没有显示在项目中）。我必须显示目录中的所有文件，以删除遗留的未使用的* .js文件。

Answer 7

resizable 指令不正确。 ng-transclude指令必须应用于最内层元素，因为其内容将被丢弃并替换为已转换的内容。

您应该使用（更正的）可调整大小的元素指令包围 tbox 指令模板。我不知道 editoptions 属性是做什么的，但如果它也是一个指令，那么它也不应该有一个模板。

我的意思是这样的：

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,
        //...

结果：

<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

对我来说，我的代码中没有重复项。这是因为我复制了一个模块以获得新模块的开头，然后在模块范围内查找/替换并更改文件的名称。

即使没有重复，我停止并启动基于browsersync的服务器，错误仍在继续。

通过删除构建系统为开发环境创建的.tmp目录来解决它。

显然我正在使用的FountainJS生成器创建了一个构建系统，在某些情况下会使.tmp目录变脏。它现在抓住了我几次。

Answer 10

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

Answer 11

（如果它可以帮助其他人）

对我来说，问题是有一个备份文件（即.bkp.html），它只是我用来参考的模板的旧副本 - 但由于它匹配了＆＃34;因此被karma包含在内。 ../**/*.html"图案。

Answer 12

您不能直接使用一个（元素）指令引用另一个（元素）指令。用<div>包裹它，例如：

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

有关详细信息，请参阅https://github.com/angular/angular.js/issues/5428。

Answer 13

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

要求模板的多个指令

13 个答案: