困惑于如何使用角度ui-router(如gmail)实现基于选项卡的应用程序

Question

我昨晚想到如何将我们的crud应用程序移植到基于标签的应用程序,如gmail.首先,阅读了很多关于ui-router的信息,我想创建一个tabService,它将为每个状态更改创建一个新选项卡(listen $ rootScope.stateChangeSuccess),新选项卡将包含相应的视图(ui-view ="bancos") )将显示状态模板.

我的第一个测试和我的第一个问题,当显示项目列表时,单击其中一个项目(例如itemId = 4)应该打开一个新选项卡并在此选项卡中显示id = 4的项目,在相应的内部( UI视图= "浅滩/ 4").注意我是如何尝试将命名的ui-view映射到状态,以在相应的ui-view中显示状态定义的模板.

我知道ui-router示例似乎正在尝试我正在尝试,但他们使用嵌套状态与父状态模板内的unamed ui-view.在我的例子中,父状态ui-view元素和他的子状态ui-view元素应该是兄弟.

考虑到角度,树结构的性质以及ui-router状态的性质,树结构也是如此,我可以使用ui-router来实现我的需求(使用基于选项卡的设计的crud应用程序).

关心丹尼

Answer 1

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

编辑：

我发现了更多有用的数据。

https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

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

        .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">