Question

我使用Angular v1.3.7，我想创建一个可以处理其中组件的主组件。

<rl-data-master> <rl-grid> <rl-toolbar> </rl-toolbar> </rl-grid> <rl-form> <rl-toolbar> </rl-toolbar> </rl-form> </rl-data-master>

每个组件都有一个视图，但是对于组件的视图，我想显示另一个组件的视图。示例：<rl-grid></rl-grid>显示网格，但使用此结构我想显示网格和工具栏。

组件的简单示例：

var rlDataMaster = { templateUrl: 'RL.DataMaster.tml.html', bindings: { options: '=', }, controller: function ($scope) { } } rlDataMaster.$inject = ['$scope'];

并且

DashboardApp.run(function ($rootScope, $state, $templateCache) { $rootScope.$state = $state; $templateCache.put('RL.DataMaster.tml.html', '<div>blabla</div>' ); }

在我的HTML中

<rl-data-master> inside </rl-data-master>

在我的页面中的这个简单示例中，我得到的视图是＆＃39; blabla＆＃39;和文本＆＃39; inside＆＃39;永远不会出现。

我想创建一个独立组件，<rl-toolbar options="toolbarOptions"></rl-toolbar>必须将toolbarOptions作为参数并继承父组件。

我也希望这个<rl-toolbar></rl-toolbar>可以单独使用，也可以与不同的父母一起使用

<rl-data-master> <rl-toolbar> </rl-toolbar> <rl-grid> </rl-grid> </rl-data-master>

在哪里可以找到更好的结构或实践用于此目的？

修改从答案我使用'<ng-transclude></ng-transclude>'并起作用，但如何在不同的＆＃39;＆＃39;＆＃39; ＆＃39;？

Answer 1

在这种情况下，您应该使用transclusion，您可以将rl-data-master指令的内部内容投影到内部指令中提到的transcluded元素上。 Transclusion can be achieve via server ways，但我在这里使用ng-transclude指令演示使用情况。另请在transclude: true指令内提及rl-data-master。

因此您的指令模板可能会更改为

$templateCache.put('RL.DataMaster.tml.html',
   '<div>'+
      'blabla'+
      '<ng-transclude></ng-transclude>'+
   '</div>'
);

包含其他组件的组件的最佳实践和结构

1 个答案: