对如何使用 Angular ui-router（如 gmail）实现基于选项卡的应用程序感到困惑答案

【问题标题】：Confused in how to implement tab based app with angular ui-router (like gmail)对如何使用 Angular ui-router（如 gmail）实现基于选项卡的应用程序感到困惑
【发布时间】：2013-09-17 19:22:54
【问题描述】：

昨晚我在考虑如何将我们的 crud 应用程序移植到基于标签的应用程序，例如 gmail。首先，阅读了很多关于 ui-router 的内容，我认为创建一个 tabService 将为每个状态更改创建一个新选项卡（听 $rootScope.stateChangeSuccess），新选项卡将包含相应的视图（ui-view="bancos" ) 将显示状态模板。

我的第一个测试和我的第一个问题，当显示项目列表时，单击其中一个项目（例如 itemId=4）应该打开一个新选项卡并在此选项卡中显示 id=4 的项目，里面相应的（ui-view="bancos/4"）。请注意我是如何尝试将命名的 ui-view 与状态映射以在相应的 ui-view 中显示状态定义的模板。

我知道 ui-router 示例似乎在做我正在尝试的事情，但他们在父状态模板内使用带有未命名 ui-view 的嵌套状态。在我的例子中，父状态 ui-view 元素和他的子状态 ui-view 元素应该是同级的。

考虑到角度、树结构的性质以及 ui-router 状态的性质，树结构也是如此，我可以使用 ui-router 来实现我的要求（基于选项卡设计的 crud 应用程序）。

问候丹尼

【问题讨论】：

标签： angularjs angular-ui-router

【解决方案1】：

我正在寻找相同的信息，以下示例对您有帮助吗？http://plnkr.co/edit/gMsKK9l7J0B8vZIMIVfD?p=preview（不是我的编码。）

编辑：

在我的代码中，我是这样设置的：

        .state('surveys.list', {
            url: '/list',
            templateUrl: "survey/surveys_overview.tpl.html",
            controller: 'SurveyOverview'
        })
        .state('surveys.create', {
            abstract: true,
            templateUrl: "survey/survey.create.tpl.html",
            controller: 'SurveyManageController'
        })
        .state('surveys.create.views', {
            url: '/create',
            views: {
                'details': {
                    templateUrl: "survey/survey.create.details.tpl.html"
                },
                'steps': {
                    templateUrl: "survey/survey.create.steps.tpl.html"
                }
            }
        });

surveys.create.tpl.html 只有一个和两个选项卡，每个选项卡都有一个 div：

<div ui-view="details"> & <div ui-view="steps">

【讨论】：

【解决方案2】：

这是我的例子，如果你有问题我可以回答

http://plnkr.co/edit/tqfPVFaesSe9Q6ZkPMzE?p=preview

简短说明：不要使用制表符来代替创建假的，效果很好并且可以节省大量工作。

最好的

【讨论】：