AngularJS用相同的指令

我有一個問題，關於AngularJS複合視圖複合視圖，也就是接近一個：AngularJS Composite Components AngularJS用相同的指令

不過，我想知道是否有可能有一個指令，其中包括同一指令的列表，像這樣：

<mydirective name="thecontainer"> 
    <mydirective name="a"/> 
    <mydirective name="b"/> 
    <mydirective name="c"/> 
</mydirective>

感謝，

大衛。

編輯

接聽blesh，我會更精確。我想展示盒（一個簡單的方形），可以有一個或多個箱子，自己可以有很多木箱等

這裏是指令

myApp.directive('box', function() { 
return { 
    restrict:'E', 
    replace:true, 
    templateUrl:"partials/box.html", 
    scope: { 
     name : '@' 
    }, 
    link:function (scope, element, attrs, ctrl) { 
     console.log("trying to log " + attrs.name); 
    } 
} 
});

這裏是模板：

<div class="box"> 
<div class="box-header"> 
    <div>{{ name }}</div> 
</div> 
<div class="box-container"> 
    <!-- display other boxes here--> 
</div> 
</div>

下面是該視圖中的有趣的代碼：

<box name="TOP" > 
    <box name="SUB" > 

    </box> 
    <box name="SUB" > 

    </box> 
</box>

顯然缺少的東西告訴子箱子「嘿，請在正確的地方展示給您的父母，請父母，根據您的孩子數量調整您的尺寸」

David。

來源

2013-07-18 bdavidxyz

是的，您可以這樣做。考慮嵌套的ng重複。這可能不是stackoverflow的問題，因爲你還沒有嘗試過任何東西，沒有具體的問題。 –

是的，但我想不出你的例子的基本情況。編譯之後，您的包含指令將包含更多指令，直到日期結束。 –

好的我有答案，只需ng-transclude必須包含在模板中。 – bdavidxyz

答案很簡單，沒有ng-transclude，angular沒有辦法正確解釋inna的HTML標籤的內容。因此，正確的方法是通過添加ng-transclude來修正模板，如下所示：

<div class="box"> 
    <div class="box-header"> 
     <div>{{ name }}</div> 
    </div> 
    <div class="box-container" ng-transclude> 
     <!-- display other boxes here--> 
    </div> 
</div>

來源

2013-07-19 08:39:11 bdavidxyz

AngularJS用相同的指令

回答

相關問題