0

我有一个 SPA 加载以下视图方案：

主页 > 视图 > 子视图 > 子子视图。

主页加载带有主导航的视图。子视图根据主导航中选择的链接显示包含不同项目列表的状态。

这些项目是探索详细信息的链接，这些链接显示在子子视图中，其中我有 3 个选项卡。我正在尝试考虑一种解决方案，以在单击子视图列表上的链接时自动加载详细信息的第一个选项卡。此外，子视图列表中的链接正在传递一个参数来获取我的数据库中的一个对象。

起初，我试图做的是将第一个选项卡放在我的 HTML 中，所以当点击链接时它会显示出来，但它不适合，但我需要更动态地进行操作，一旦我将所有控制器。这是我的路线配置：

$stateProvider
        .state('main.application', {
            abstract: true,
            url: '/application',
            template: '<ui-view/>'
        })
        .state('main.application.index', {
            url: '',
            templateUrl: 'app/application/application.html',
            controller: 'ApplicationController as applicationCtrl',
            resolve: resolve.index
        })
        .state('main.application.settings', {
            url: '/settings/:id',
            templateUrl: 'app/application/settings/application.settings.html',
            controller: 'ApplicationSettingsController as appSettingsCtrl',
            resolve: resolve.settings
        })
        .state('main.application.settings.info', {
            url: '/info',
            templateUrl: 'app/application/settings/info/application.settings.info.html',
            controller: 'ApplicationSetInfoController as appInfoCtrl',
            resolve: resolve.settings
        })
        .state('main.application.settings.platforms', {
            url: '/platforms',
            templateUrl: 'app/application/settings/platforms/application.settings.platforms.html',
            controller: 'ApplicationSettingsController as appSettingsCtrl',
            resolve: resolve.settings
        })
        .state('main.application.settings.keys', {
            url: '/keys',
            templateUrl: 'app/application/settings/keys/application.settings.keys.html',
            controller: 'ApplicationSetKeysController as appKeysCtrl',
            resolve: resolve.settings
        });
4

1 回答 1

0

您可以将 ng-include 用于动态部分。尽管 ui-router 支持多个视图，但也存在问题——但并非没有问题。

如果您有一个有限的已知视图列表要显示，另一种选择是使用带有自定义指令的 ng-switch。这是我的首选方法。如：

<div ng-switch="currentSelection">
  <div ng-switch-when="subPage1" subpage-one />
  <div ng-switch-when="subPage2" subpage-two />
</div>

这样，如果你想自动，最初显示某个页面，你设置$scope.currentSelection = 'subPage1'

于 2015-11-09T14:03:28.600 回答