Question

我有两个独立的组件，一个在HTML中定义。但是我的第二个（内部）组件没有使用内部组件的templateUrl属性中提到的模板填充。

//first component
angular.module('app').component('toolCtrl', {
  templateUrl: '/NFRManagementTools/static/js/templates/toolCtrl.html',
  controller: ToolCtrl,
  controllerAs: 'vtc',
});

//second coponent

angular.module('app').component('itemsView', {
  templateURL: '/NFRManagementTools/static/js/templates/itemsView.html',
  controller: ItemsViewCtrl

});

<tool-ctrl>
  <items-view></items-view>
<tool-ctrl>

Answer 1

您可能正在寻找transclude选项，在父组件控制器中添加以下选项

angular.module('app').component('toolCtrl', {
  transclude: true,
  templateUrl: '/NFRManagementTools/static/js/templates/toolCtrl.html',
  controller: ToolCtrl,
  controllerAs: 'vtc',
});

在父组件模板中，您应该通过放置特定标签<ng-transclude></ng-transclude>

来指定放置内部对象的位置

检出official文档，如果父组件下有多个特定元素，则这里是similar problem。

angularJS组件中的组件

1 个答案: