試圖在另一個指令中包裝角度指令

我想在另一個指令中包裝指令，並且遇到問題。例如，使用UI引導選項卡和窗格指令：試圖在另一個指令中包裝角度指令

我希望把這樣的：

<tabs> 
    <pane heading="FOO">...</pane> 
    <pane heading="BAR">...</pane> 
</tabs>

中：

<tabs> 
    <pane-wrapper heading="FOO">...</pane-wrapper> 
    <pane-wrapper heading="BAR">...</pane-wrapper> 
</tabs>

其中窗格中，包裝指令的樣子：

angular.module('test').directive('paneWrapper', function(){ 
     return{ 
      restrict: 'E', 
      replace: true, 
      template: "<pane ng-transclude></pane>" //somehow need to pass along the heading attribute 
     } 
    });

我想這樣做的原因是因爲我不想大量修改窗格，我想包裝它，也許有一個等多個指令。我想我可以完全複製窗格指令並將其更改爲一個選項。

無論如何，我得到的錯誤：

Error: Multiple directives [ngTransclude, ngTransclude] asking for 'ngTransclude' controller on <div class='tab-pane' ng-class='active: selected' ng-show='selected' ng-tranclude=''>

的思考？

我不應該需要創建一個窗格包裝範圍正確嗎？有一個具有各種數據的父範圍...我只想包裝這個並創建一個可重用的組件。

來源

2013-03-27 nathanpr

這段代碼如果有效的話不會做任何事情。你能提供一些關於你的用例的更多細節嗎？你想用一個你不能做的窗格做什麼？ – 2013-03-27 21:32:41

當我想要做這樣的事情時，有幾個例子。如果我想將幾個指令包裝在一起，以提供一個可重用的指令/組件與其他人。在這種情況下，我使用tabs指令和carousel指令進行分頁/導航，我希望頂級指令在其指令中包含，因此您可以簡單地在下面添加幻燈片。 – nathanpr 2013-04-02 16:36:56

但是爲什麼不能，例如，傳送帶是窗格的子元素？爲什麼他們需要成爲相同的元素？在這種情況下，它甚至不能工作。 – 2013-04-02 19:59:35

您是否嘗試過使用

iElement.html($compile(<pane..)(scope));

除去模板屬性，並依靠編譯<pane>和直接更新iElement HTML。

您可能想要在包裝器指令中使用replace: true屬性。

來源

2013-03-27 21:43:41 Ketan

試圖在另一個指令中包裝角度指令

回答

相關問題