离子选项卡：如何在不同选项卡中重复使用相同的详细信息页面 [英] ionic tabs: How to reuse the same detail page accross different tabs

问题描述

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

但是，在图表2 中，我们可以看到如果每个选项卡需要重用相同的主 - 细节控制器和模板，则无法实现开箱即用，最大的困难是ui-router的静态/声明性质。

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

所以问题是，如何重复使用我的模板和控制器代码一直到详情页面，同时停留在当前选定的标签页上？

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

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

  .state（'profile.intro'，{
 url：'/ intro /：username'，
 views：{
 **'profile-intro'**：{
 templateUrl：'app / profile / views / profile- intro.html'，
控制器：'ProfileIntroCtrl'
} 
} 
}）
  

我需要视图名称为dyna mically set。

我认为某种全局控制器加上指令可以解决这个问题，但我无法理解它。 。

非常感谢任何帮助!!

解决方案

发表了在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}）; 
} 
}; 
  

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

Here are two posts which basically describe the same need as mine. Unfortunately, these have been left with no concrete solution.

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

In order to explain a bit better what we're trying to achieve, please refer to the 2 charts below.

I trust that chart 1 needs no explanation as it is the classic use of tabs UI component.

However, in chart 2, we can see that if each tab needs to reuse the same master-detail controllers and templates, it is impossible to achieve out the box, the biggest difficulty being the static / declarative nature of the ui-router.

Concretely, I'm able to set things up correctly until the master view. I can actually reuse the same list (master) across the 3 tabs, and when I click on a row, the detail page appears, which is good. Unfortunately, it switches to the first tab !!

So the problem is, how can I reuse my templates and controllers code all the way to the detail page, while staying on the currently selected tab?

In other words : I want a details page that would show up in its corresponding tab when you click any item, in any of the lists, of any the tabs.

the following code shows that the ui-router forces you to point to a "hard-coded" view name, in this case "profile-into":

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

I need the view name to be dynamically set.

I figure some sort of global controller coupled with a directive could do the trick, but I can't get my head around it...

Any help is greatly appreciated !!

解决方案

Posted a response over in the Ionic forum, but figured I'd dup it here as well...

I had a similar issue where I needed to reuse templates across tabs and maintain keeping the user in the active tab. I ended using $ionicTabsDelegate and in my controllers, grabbed the tab index by doing something like this $scope.selectedTabIndex = $ionicTabsDelegate.selectedIndex();

My issue was having the correct routes. I created routes for each tab that referenced the same template but had a different URL. In my templates, I then loaded in the selectedTabIndex, and when I needed to link to another view, I passed the tab index in my function to change states.

For example, in the template I am re-using, I have this:

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

and in my controller, I have something like this:

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

I would rather have multiple routes than multiple templates, so this worked well for me. I'd be very interested to see if someone else comes up with another way to achieve this.

这篇关于离子选项卡：如何在不同选项卡中重复使用相同的详细信息页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！