如何在AngularJS的相同元素上嵌套兩個指令？

當我嘗試在同一元素上嵌套兩個指令時，出現以下錯誤。 嵌套的「E」指令 - 多個指令要求新的/隔離的範圍, 我想嵌套兩個「E」隔離的作用域指令，如this fiddle。（要真正重現該問題，您需要取消對<LW>指令）如何在AngularJS的相同元素上嵌套兩個指令？

我不斷收到這個錯誤，我不知道/知道如何解決：

Error: [$compile:multidir] Multiple directives [lw, listie] asking for new/isolated scope on: <listie items="items items">

是不是這個應該工作？謝謝！

來源

2013-12-16 Tony Lâmpada

刪除更換：在該指令真正的名字 'LW' ..

這也應該解決。

更新小提琴：updated fiddle

app.directive('lw', function(){ 
    return { 
     restrict: 'E', 
     scope: { 
      items: "=" 
     }, 
     template: '<listie items="items"></listie>', 
     controller: function($scope) { 
     } 
    } 
});

分析：

是什麼原因造成的問題？

用lw指令替換爲true會發生什麼是lw有隔離作用域，現在作爲替換= true，被替換的元素本身具有隔離範圍試圖在那裏被替換，所以你在不知不覺中做了什麼，爲同一元素列表提供兩個範圍。在angular.js 1.2.1版

代碼級的觀察：

線5728：功能applyDirectivesToNode是執行彙編指令，並在這裏行5772他們做這個檢查，如果我們試圖分配功能重複範圍或換句話說與兩個範圍相同的元素。

function assertNoDuplicate(what, previousDirective, directive, element) { 
     if (previousDirective) { 
     throw $compileMinErr('multidir', 'Multiple directives [{0}, {1}] asking for {2} on: {3}', 
      previousDirective.name, directive.name, what, startingTag(element)); 
     } 
    }

以上是這是否檢查功能，並且如果萬一有分配兩個作用域到相同元件的嘗試它甩這個錯誤。所以這就是它被設計成的樣子，而不是一個錯誤。

爲什麼要替換：真正的刪除解決了這個問題？

通過刪除replace：true發生了什麼，而不是新的指令listie被替換爲lw，它被附加到它中，所以它是一個獨立的作用域嵌套到另一箇中，這是絕對正確和允許的。嵌套的分離範圍是像

<lw items="items" class="ng-isolate-scope"> 
    <div items="items" class="ng-isolate-scope"> 
     .......... 
    </div> 
</lw>

爲什麼包裝在一個div也將工作（這是你認爲是解決方法解決方案）？

要注意的一點是，div不是具有單獨隔離範圍的元素。它只是一個元素。這裏取代你將連接到div的隔離範圍。（注意：div本身沒有隔離範圍），所以沒有2個隔離範圍連接到相同的元素div。因此沒有重複，因此斷言步驟通過並開始工作。

所以這就是它是如何設計的工作，絕對不是一個錯誤。

來源

2013-12-16 15:07:34

聖牛，真棒回答，謝謝！ –

爲了保持'replace：true'功能，我選擇使用div來包裝模板。它解決了這個問題，由此產生的html與'replace：true'是「更乾淨」。感謝你的回答！ –

感謝這個簡短的解釋！你爲我節省了很多時間！ –

我設法解決它通過替換包裝指令中的模板代碼。這是update fiddle。這是改變了。

template: '<div><listie items="items"></listie></div>', 
//template: '<listie items="items"></listie>', bug?

這解決了我的問題，但它看起來像一個bug。我想我會在Github上創建一個問題。

有 - https://github.com/angular/angular.js/issues/5428

來源

2013-12-16 12:24:05

這是最簡單的方法來解決他的問題，這不是一個錯誤 – gr3g

這也解決了我的問題，謝謝。 – surfitscrollit

只是爲了感興趣，我有同樣的錯誤。事實證明，因爲我做了舊的「剪切和粘貼」來創建一個新的指令，他們有相同的名稱開始。我忘了改變它產生這個錯誤。

因此，對於任何與我一樣糟糕的人，那麼這裏有一個可能的解決方案來檢查。

來源

2014-04-30 10:43:12

謝謝我在這個問題和其他問題中嘗試了所有其他解決方案，但是當看到您的問題時，我記得我將一個指令從一個文件夾複製到另一個文件夾，但忘記刪除舊定義，因此每個指令都定義了兩次，儘管是兩個不同的模塊。 –

BAH！...「Ol'cut'N paste」 - 如果可以的話，我會加倍努力:-P ...謝謝！ – Cody

接受的回覆here爲我解決了這個問題。

本質上從指令中刪除隔離範圍，而是通過指令的鏈接函數（在attributes參數中）傳遞範圍屬性。

來源

2014-11-06 14:01:37 blomster

我的問題是因爲我包括指令JS文件兩次

來源

2014-12-30 13:20:59 ibrabeicker

即使您聲明特定於某個模塊的指令，它似乎也是如此，它會在全局範圍內註冊。我不知道這是否是設計。看起來像是一個bug – fernando

我用復仇者例子，更新到1.4角後，我開始這一點。事實證明，它有一個控制器和一個指令戰鬥範圍在同一行

<div my-directive ng-controller="myController as vm"></div>

所以移動控制器到一個單獨的範圍，以解決它。

<div my-directive > 
<div ng-controller="myController as vm"> 
</div> 
</div>

來源

2015-06-11 07:37:16 Illuminati

在我來說，我有過NG重複的元素上的引導，UI手風琴組指令：

<accordion-group is-open="status.open" ng-repeat="receipt in receipts">

而且通過這樣做解決了它：

<div ng-repeat="receipt in receipts"> 
    <accordion-group is-open="status.open">

來源

2015-11-04 22:02:10

如何在AngularJS的相同元素上嵌套兩個指令？

回答

相關問題