42

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

angular 抛出的以下错误到底是什么意思？

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/

4

13 回答 13

30

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

于 2013-11-06T02:18:18.980 回答
29

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

于 2015-07-30T12:09:27.263 回答
15

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

于 2015-11-13T14:11:17.657 回答
8

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

于 2016-04-27T22:31:35.130 回答
4

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

对于我的咖啡脚本，但很容易以纯角度发生：

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

结论：“名称”在整个应用程序中必须是唯一的。

于 2016-08-11T10:11:27.953 回答
4

对于使用 TypeScript 的 Visual Studio 用户，这让我很受用。我重命名了我的打字稿文件，并且构建的 .js 文件在目录中（但它没有出现在项目中）。我必须显示目录中的所有文件以删除挥之不去的未使用的 *.js 文件。

于 2017-11-30T20:16:49.953 回答
2

可调整大小的指令不正确。该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>
于 2013-11-06T02:15:17.090 回答
1

对我来说，我的代码中没有重复项。这是因为我复制了一个模块以抢占新模块的先机，然后进行模块范围的查找/替换并更改文件的名称。

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

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

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

于 2016-09-20T19:13:22.447 回答
1

就我而言，我在 BundleConfig 中引用了一个丢失的文件，我删除了该引用并开始工作。

于 2016-02-06T00:15:45.067 回答
0

（以防它帮助别人）

对我来说，问题在于有一个备份文件（即 .bkp.html），它只是我用作参考的模板的旧副本 - 但由于它与“.../**/ *.html" 模式。

于 2016-07-14T15:45:01.903 回答
0

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

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

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

于 2018-05-03T08:42:45.690 回答
0

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

于 2016-02-12T13:59:55.233 回答
-2

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

于 2017-01-19T05:25:53.420 回答