Question

我的角度应用程序中有两个用户流，每个流的步骤与它们的不同之处更相似。一个特定的步骤有多个面板，我想根据用户流量有条件地显示不同的面板（一些面板对于两个流程都是通用的）。

显然，最基本的解决方案是让两个独立的状态有两个独立的模板，但它们之间有很多共同之处，会有很多重复的代码。

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

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

如何有效地使用角度UI路由器以避免重复html？

Answer 1

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

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

参数表示为：:hasSpecialPanel

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

$stateParams.hasSpecialPanel

因此，您可以进行测试以检查参数的值。

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

Answer 2

它非常依赖你想要达到的目标。

指令更像是具有相同行为的可重复使用项目，仅依赖于转换为它们的内部信息。它们的显示完全由状态控制器定义，它们是在哪里实现的。指令被视为模块的内容。
当您拥有一个功能的多个结果时，视图更像是一个选项。视图计为附加模块的子模块。

从你的话中我假设你有某种侧边栏或标题，它们具有不同的外观和所有。我只是因为它的奇异性而将它创建为子模块（视图）。我不认为您想要将面板复制到每个页面等。如果您使用templateProvider来定义不同的HTML模板，这些模板将在某些情况下仅在一个绑定到视图的控制器中使用他们有类似的功能 - 你可以自由地做到这一点。因为即使你定义了一些将在第一个模板中使用的方法，它也不会对另一个模板产生影响。

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

    }
})

条件角度ui路由器视图

2 个答案: