javascript - 有条件的 Angular ui 路由器 View

Question

我的 Angular 应用程序中有两个用户流程，每个流程的步骤相似多于不同。一个特定的步骤有多个面板，我想根据用户流程有条件地显示不同的面板(一些面板对于两个流程都是通用的)。

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

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

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

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

Answer 1

您可以通过路由器将参数传递给 Controller ​​。

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

参数表示为::hasSpecialPanel

在您的 Controller 中，您可以使用以下方式访问此参数:

$stateParams.hasSpecialPanel

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

然后您可以根据此数据的状态通过 ng-show 显示/隐藏面板。