Angularjs 是否可以设置动态子指令？

是否可以在父指令中设置动态子指令

在下面的示例中，我使用了一个元素指令，我在视图中看到了“”子元素应该在哪里

如果我使用attribute指令，则会得到“”

我想也许有更好的办法？我基本上只是希望能够在父“tile”指令中使用我想要的任何子指令

定义

  // Tile
  .directive('tile', function () {
    return {
      replace: true,
      restrict: 'E',
      scope: {
        child: '@',
        heading: '@',
        icon: '@'
      },
      templateUrl: 'templates/tile.tpl.html',
      transclude: true
    };
  })

  // Stats Table
  .directive('statsTable', function () {
    return {
      replace: true,
      restrict: 'AE',
      template: '<h1>Table</h1>',
    };
  });

<article class="tile">

  <i class="glyphicon glyphicon-{{icon}}"></i>
  <h2>{{heading}}</h2>    

  <{{child}}></{{child}}>

</article>

//平铺
.directive（'tile'，function（）{
返回{
替换：正确，
限制：'E'，
范围：{
孩子：“@”，
标题：“@”，
图标：“@”
},
templateUrl:'templates/tile.tpl.html'，
转移：对
};
})
//统计表
.指令（'statsTable'，函数（）{
返回{
替换：正确，
限制：“AE”，
模板：“表”，
};
});

标记

<tile child="stats-table" heading="Users" icon="user"></tile>

模板

  // Tile
  .directive('tile', function () {
    return {
      replace: true,
      restrict: 'E',
      scope: {
        child: '@',
        heading: '@',
        icon: '@'
      },
      templateUrl: 'templates/tile.tpl.html',
      transclude: true
    };
  })

  // Stats Table
  .directive('statsTable', function () {
    return {
      replace: true,
      restrict: 'AE',
      template: '<h1>Table</h1>',
    };
  });

<article class="tile">

  <i class="glyphicon glyphicon-{{icon}}"></i>
  <h2>{{heading}}</h2>    

  <{{child}}></{{child}}>

</article>

{{heading}}

编辑-需要补充一点：我还需要将数据传递给孩子。大概是这样的：

<parent child-data="childData"></parent>

我想这就是你要找的东西：。我认为标记没有绑定，所以您必须在父指令中附加子标记名，并使用$compile将父标记的范围分配给子标记。此外，可以轻松地将childData从父范围绑定到子范围，因为两者现在共享同一范围。