要求模板的多個指令

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

多次導入同一指令可能會導致此問題。