Question

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

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

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

谢谢，

大卫。

修改

回答肉体，我会更精确。我正在尝试展示一个盒子（一个简单的方块），它可以有一个或多个盒子，它们可以有很多盒子等。

这是指令

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>

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

1 个答案: