5

昨晚我在考虑如何将我们的 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 应用程序）。

问候丹尼

4

2 回答 2

2

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

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

简短的解释：不要使用标签而不是创建一个假的，效果很好，你可以节省很多工作。

最好的

于 2013-12-03T19:44:56.317 回答
0

我正在寻找相同的信息，以下示例对您有帮助吗？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">
于 2013-11-20T14:17:31.847 回答