如何在 AngularJS 中定义可组合组件

Question

在AngularJS (1.x)中，我们如何创建一个可重复使用的小部件（组件），它具有用于其他小部件（组件）的插入点（插槽）？

假设我们有一个名为 "verticalsplitter" 的 component/directive。它的目的是将屏幕区域划分为 "top" 和 "bottom" 区域（可能允许用户调整大小、折叠等）。

现在假设我们有一堆其他丰富的组件，例如richtextview、treeview、videoplayer 和 gridview。

一个 page/view 1 我想要一个 verticalsplitter，顶部是 richtextview，底部是 treeview。在 page/view 2 我想要一个顶部有视频播放器、底部有网格视图的垂直拆分器。

第 1 页

<html>
<body>
    <verticalsplitter>
        <top ng-initialSize="30%">
            <richtextview />
        </top>
        <bottom ng-initialSize="70%">
            <treeview  />
        </bottom>
    </verticalsplitter>
</body>
</html>

第 2 页

<html>
<body>
    <verticalsplitter ng-locked="true">
        <top>
            <videoplayer />
        </top>
        <bottom>
            <gridview  />
        </bottom>
    </verticalsplitter>
</body>
</html>

我怎样才能做到这一点？如果组件无法实现（并且我需要使用指令进行嵌入），那没关系。

Answer 1

组件可以嵌入。在 AngularJS Developers Guide for Components:

中明确说明

app.component("verticlesplitter", {
    transclude: {
        'topPart': 'top',
        'bottomPart': 'bottom'
    },
    template: `
          <div style="border: 1px solid black;">
              <div class="top" ng-transclude="topPart"></div>
              <div>Something in the middle</div>
              <div class="bottom" ng-transclude="bottomPart"></div>
          </div>
    `
});

有关详细信息，请参阅

如何在 AngularJS 中定义可组合组件

How to define composable components in AngularJS

angularjs

angularjs-directive

angularjs-ng-transclude