要求模板的多个指令

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 at http://jsfiddle.net/sEZM3/

Answer 1

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

Answer 2

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

Answer 3

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

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

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

Answer 6

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

Answer 7

可调整大小的指令不正确。 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

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

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

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

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

Answer 10

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

Answer 11

（以防它帮助其他人）

对我来说，问题是有一个备份文件（即.bkp.html），它只是我用来参考的模板的旧副本 - 但这是由karma包含的，因为它匹配“... / ** / * .html“模式。

Answer 12

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

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

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

Answer 13

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