离子选项卡：如何在不同选项卡中重复使用相同的详细信息页面

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 中，我们可以看到，如果每个标签需要重复使用相同的主 - 细节控制器和模板，则无法实现开箱即用，最大的困难是静态/ ui-router的声明性。

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

问题是，如何在保留当前所选标签的同时，将模板和控制器代码一直重复到详细信息页面？

换句话说：当您点击任意标签的任何列表中的任何项目时，我想要一个显示在相应标签页中的详细信息页面。

以下代码显示ui-router强制您指向＆＃34;硬编码＆＃34;查看名称，在这种情况下＆＃34; profile-into＆＃34;：

.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，当我需要链接到另一个视图时，我在我的函数中传递了tab索引来改变状态。

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

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});
    }
};

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