离子标签：如何在不同的标签中重用相同的详细信息页面

Question

这里有两篇文章基本上描述了与我相同的需求。不幸的是，这些都没有具体的解决方案。

http://forum.ionicframework.com/t/reuse-master-detail-page-template-between-tabs/17493

http://forum.ionicframework.com/t/same-detail-page-for-2-different-tabs-with-history/17425

为了更好地解释我们正在努力实现的目标，请参阅下面的 2 个图表。

我相信图表 1 无需解释，因为它是标签 UI 组件的经典用法。

然而，在图2中，我们可以看到，如果每个tab都需要复用相同的master-detail控制器和模板，是不可能做到开箱即用的，最大的难点在于静态/ ui-router 的声明性。

具体来说，在主视图之前，我可以正确设置。我实际上可以在 3 个选项卡中重复使用相同的列表（主列表），当我单击一行时，会出现详细信息页面，这很好。 不幸的是，它切换到第一个标签！

所以问题是，我怎样才能重复使用我的模板和控制器代码一直到详细信息页面，同时保留在当前选定的选项卡上？

换句话说：我想要一个详细信息页面，当您单击任何选项卡的任何列表中的任何项目时，该详细信息页面将显示在其相应的选项卡中。

以下代码显示 ui-router 强制您指向“硬编码”视图名称，在本例中为“profile-into”：

.state('profile.intro', {
            url: '/intro/:username',
            views: {
                **'profile-intro'**: {
                    templateUrl: 'app/profile/views/profile-intro.html',
                    controller: 'ProfileIntroCtrl'
                }
            }
        })

我需要动态设置视图名称。

我认为某种全局控制器与指令相结合可以解决问题，但我无法理解它......

非常感谢任何帮助！

Answer 1

在 Ionic 论坛上发布了回复，但我想我也会在这里复制它......

我遇到了类似的问题，我需要跨标签重复使用模板并保持用户处于活动标签中。我结束了使用 $ionicTabsDelegate 并在我的控制器中，通过执行类似这样的操作来获取选项卡索引 $scope.selectedTabIndex = $ionicTabsDelegate.selectedIndex();

我的问题是路线正确。我为每个引用相同模板但具有不同 URL 的选项卡创建了路由。然后在我的模板中加载selectedTabIndex，当我需要链接到另一个视图时，我在我的函数中传递了选项卡索引来更改状态。

例如，在我重复使用的模板中，我有这个：

ng-click="viewUser(id, selectedTabIndex);"

在我的控制器中，我有这样的东西：

$scope.viewUser = function(uid, tabIndex){
    if(tabIndex == 2){
        $state.go('tab.me-user',{ uid: uid});
    } else {
        $state.go('tab.user-profile',{ uid: uid});
    }
};

我宁愿拥有多个路线而不是多个模板，所以这对我来说很有效。我很想看看其他人是否想出另一种方法来实现这一目标。