angularjs - 具有相同指令的 AngularJS 复合视图

Question

我有一个关于 AngularJS 中的复合视图的问题，它与那个很接近：AngularJS Composite Components

但是，我想知道是否可以有一个包含相同指令列表的指令，如下所示：

<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>

显然缺少一些东西来告诉子框“嘿，请在您的父母的正确位置显示，请父母，根据您拥有的孩子数量调整您的尺寸”

大卫。

Answer 1

答案很简单，没有 ng-transclude，angular 无法正确解释内部 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>