要求模板的多个指令

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

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