Javascript 条件角度ui路由器视图

我的angular应用程序中有两个用户流，每个流的步骤都非常相似，而不是不同。一个特定步骤有多个面板，我希望根据用户流有条件地显示不同的面板（其中一些面板对于两个流都是通用的）

显然，最基本的解决方案是使用两个单独的模板拥有两个单独的状态，但是由于它们之间有许多共同点，因此会有大量重复的代码

我看到的另一个解决方案是为每个面板创建单独的子状态

或者这根本不是UI路由器，我应该为每个面板使用自定义指令

---

如何有效地使用angular UI router来避免重复html？

这取决于您想要实现什么

• 指令更像是具有相同行为的可重用的项，只依赖于转换为它们的内部信息。它们的显示完全由实现它们的状态控制器定义。指令被视为模块的内容

• 当一个功能有多个结果时，视图更像是选项之一。视图作为附加模块的子模块计算

根据你的话，我假设你有一些不同外观的边栏或标题，仅此而已。我将创建它作为子模块（视图），只是因为它的奇异性。我认为您不想将面板复制到每个页面等。如果您使用

templateProvider

定义不同的HTML模板，在某些情况下，这些模板将仅在一个绑定到视图的控制器中使用，并且这两个控制器都具有类似的功能，您可以自由地这样做。因为即使您定义了一些将在第一个模板中使用的方法，它也不会对另一个模板产生影响

$stateProvider.state('main', {
    url: '/'
    views: {
        '': {/* configuration */},
        'panel@main': {
            templateProvider: () => {/* returns template depending on condition*/},
            controller: panelController,
            controllerAs: 'panelCtrl',
            resolve: {...}
        }

    }
})

---

您可以通过路由器将参数传递到控制器

     $stateProvider
        .state('xyz', {
            url: '/xyz/:hasSpecialPanel',
            templateUrl: '/panels.html'
        });

该参数表示为：

：hasSpecialPanel

在控制器中，您可以使用以下方式访问此参数：

$stateParams.hasSpecialPanel

所以你可以做一个测试来检查参数的值

然后，您可以根据此数据的状态通过

ng show

显示/隐藏面板