如何使用通用组件使用Angular 1.5动态创建组件？

Question

我需要创建一个包含＆＃34;添加按钮的组件+/-＆＃34;允许给定组件的副本（使用其HTML模板和逻辑），并且每个组件都有一个＆＃34;删除按钮＆＃34;，为此我想创建一个通用组件，我可以传递给它任何我想要的组件，查看下面的图片

我使用了transclude，但仍然不相信，因为无法访问每个孩子的数据。这是我的代码，还有其他方法可以实现吗？

JS组件

class AddRemoveComponent {

  /**
   * Inject all the required services.
   *
   */

  constructor() {
    'ngInject'
  }

  $onInit() {
    this.items = []
  }

  /**
   *
   * On add component click.
   */

  addComponent() {
    // TODO
    debugger
    this.items.push({})
  }

  /**
   *
   * On remove component click.
   */

  removeComponent(index) {
    // TODO
    this.items.splice(index, 1)
  }

}

export const addRemoveComponent = {
  template: require('./myiad-add-remove.html'),
  controller: AddRemoveComponent,
  transclude: {
    body: 'iadComponentBody'
  },
  bindings: {
    title: '@',
    items: '='
  }
}

HTML组件

 <div class="row">
  <div class="text-center">
    <button class="btn btn-primary"
            ng-click="$ctrl.addComponent()">
      <span class="fa fa-plus"></span>
    </button>
    <span class="numeric-stepper">{{ $ctrl.items.length }}</span>
  </div>
</div>

<div class="row margin-top-20" ng-repeat="item in $ctrl.items">
  <div ng-transclude="body"></div>
  <div class="form-group">
    <div class="myiad-remove-bloc col-xs-12 text-center" ng-click="$ctrl.removeComponent($index)">
      <a href="" class="text-uppercase remove-title"><span translate>iadMyIadAddRemove.delete</span> {{ $ctrl.title }}<span class="fa fa-times"></span></a>
    </div>
  </div>
</div>

如何使用它：

 <iad-my-iad-add-remove title="TODOLABEL" items="$ctrl.project.realEstateProjectMotivation.realEstateProjectOnSales">
  <iad-component-body>
    <iad-agent-my-iad-project-motivations-how-sale-current-capital-item
      project-references="$ctrl.projectReferences">
    </iad-agent-my-iad-project-motivations-how-sale-current-capital-item>
  </iad-component-body>
</iad-my-iad-add-remove>

谢谢：）