在 AngularJS 中使用布尔值在弹出窗口中显示不同的模板

问：

我的屏幕上有 3 个图块，单击每个图块后，我都会显示一个弹出窗口。每个磁贴都有自己的弹出窗口的内部内容（不是静态内容，也需要许多功能），但弹出窗口的页眉和页脚部分是相同的。因此，我创建了一个带有页眉和页脚的通用弹出窗口，并根据单个磁贴的点击发送内部模板。单击磁贴时，我将获得磁贴的 ID，对于内部模板，我已经创建了模板。因此，在通用 ui 弹出窗口的控制器中，我为每个弹出窗口创建一个变量，并在通用弹出窗口中检查该变量并根据这些变量显示正确的内部模板。我的问题是我不想为每个图块创建单独的变量。此外，在未来，对于添加的每个图块，都需要添加一个变量，我觉得这不太好。这个解决方案没有任何错误，但我想以某种方式使其高效，并且需要一些帮助。请在下面找到代码。

PS：请原谅代码中有任何错别字。

文件夹结构：

- tilepopup
    - ui
      -genericpopup
    - templates
      - tileonetemplate
      - tiletwotemplate

genericpopup.html

<div>
    <tile-one-template show-content="genericpop.tile1"></tile-one-template>
    <tile-two-template show-content="genericpop.tile1"></tile-two-template>
</div>

模板 HTML for tileonetemplate.html

<div ng-show="showContent">
    Some content
</div>

genericpopup.controller.js

class Genericpopup {
    constructor() {
        this.tile1 = false;
        this.tile2 = false;
    }

    $onInit() {
        this.setActiveTile();
    }

    setActiveTile() {
        this.activeTile = this.stateObject.tileName; //on click of tile,
                                                     //I will get the tile name
        switch(this.activeTile) {
            case 'Tile 1':
                this.tile1 = true;
                break;
            case 'Tile 2':
                this.tile2 = true;
                break;

        }
    }
}