带有标签+“全局”搜索标题的离子应用程序

Question

我创建了一个plunker 来展示我的场景。请看一下。

问题是当我点击搜索输入时，我会被重定向到优惠标签。这不应该发生。当我点击主页标签中的搜索输入时，搜索应该显示在主页标签而不是优惠标签内。

如果我在优惠标签中点击搜索输入，搜索应该显示在优惠标签而不是主页标签 >。

因此在我的示例中导航是混乱的。

标签

<ion-tabs class="tabs-icon-top tabs-color-active-positive">

  <ion-tab title="Home" icon-off="ion-ios-home-outline" icon-on="ion-ios-home" ui-sref="app.home">
    <ion-nav-view name="tab-home"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Promoções" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" ui-sref="app.offers">
    <ion-nav-view name="tab-offers"></ion-nav-view>
  </ion-tab>

</ion-tabs>

国家

$stateProvider.state('app', {
            abstract: true,
            templateUrl: 'main.html',
            controller: function(){}
        });

        $stateProvider
            .state('app.search', {
                url: '/search',
                views: {
                    'tab-home': {
                        templateUrl: 'search.html',
                        controller: function($scope, $state){
                      $scope.current = $state.current;
                      $scope.$on('$stateChangeSuccess', function(event, toState){
                        $scope.current = toState;
                      });
                    }
                    },
                    'tab-offers': {
                        templateUrl: 'search.html',
                        controller: function($scope, $state){
                      $scope.current = $state.current;
                      $scope.$on('$stateChangeSuccess', function(event, toState){
                        $scope.current = toState;
                      });
                    }
                    }
                }
            });

            $stateProvider
            .state('app.offers', {
                url: '/promos',
                views: {
                    'tab-offers': {
                        templateUrl: 'offers.html',
                        controller: function($scope, $state){
                          $scope.current = $state.current;
                          $scope.$on('$stateChangeSuccess', function(event, toState){
                            $scope.current = toState;
                          });
                        }
                    }
                }
            });

            $stateProvider
            .state('app.home', {
                url: '/home',
                views: {
                    'tab-home': {
                        templateUrl: 'home.html',
                        controller: function($scope, $state){
                          $scope.current = $state.current;
                          $scope.$on('$stateChangeSuccess', function(event, toState){
                            $scope.current = toState;
                          });
                        }
                    }
                }
            });

我的目标是：

• 点击搜索输入且当前标签页为首页时，在首页标签页中打开搜索。
• 单击搜索输入且当前选项卡为优惠时，请在优惠选项卡中打开搜索。

我怎样才能做到这一点？

Answer 1

您确实应该将搜索部分设为各个选项卡的子选项，以便替换它们