Question

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

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

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

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

此致丹尼

Answer 1

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

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

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

最佳

Answer 2

我正在寻找相同的信息，以下示例是否对您有所帮助？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"
                }
            }
        });

survey.create.tpl.html只有一个和两个标签，每一个div：

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

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

2 个答案: