Question

在我的Ionic应用程序中，特别是在使用Chrome中的离子服务进行测试时，我在使用离子标签进行导航时看到了奇怪的行为。如果我将页面加载为根路由（http://localhost:8100/#），导航和状态工作正常。我可以点击页面底部的任何标签（iOS视图）并获得预期的行为。

现在，如果我加载其中一个嵌套视图的URL，然后单击选项卡返回到该父视图，则只显示我输入的子视图。

示例（借用Ionic的夜间笔）： http://codepen.io/ionic/pen/odqCz#/tab/facts2

在没有＃/ tab / facts2的情况下输入上面的codepen时，导航按预期发生 - 我可以点击“科学事实”＆＃39;按钮，向下导航几个孩子，然后点击“主页”按钮。图标并返回根目录。

当输入第二个网址时，我会按照我的预期直接进入facts2页面。但是，点击＆＃39; Home＆＃39; icon总是把我带回事实2。

<ion-tab title="Home" icon="ion-home" href="#/tab/home">
    <ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>

有趣的是，如果我使用＆＃39; home＆＃39;在fact2页面上的按钮，它确实正确导航到主页，但导航图标将无效。

<a class="button icon ion-home" href="#/tab/home"> Home</a>

有什么我不了解ui-router / state更改是如何工作的，还是这个bug？我主要担心的是，当编译和部署此应用程序，并且用户将程序保留在其中一个子状态中，然后重新打开时，导航栏将会中断。

Answer 1

<ion-nav-view name="home-tab"></ion-nav-view>加载您对配置文件的stateprovider声明的视图。如果首先加载辅助视图，则无法创建正确的导航历史记录，您将无法返回主选项卡视图。 name属性与您的名称相同：

views: {
        'home-tab': {
          templateUrl: "templates/home.html",
          controller: 'HomeTabCtrl'
        }
      }

因此，如果您想加载辅助视图，请先添加：

 $scope.$on('$ionicView.beforeEnter', function (event, viewData) {
    $ionicHistory.clearCache();
});

在主选项卡视图控制器中，它将清除View缓存并替换为右视图/ html。

另一种方法是使用您想要的状态副本，该副本将作用于您正在使用的当前视图，例如：

    $stateProvider
    .state('tabs', {
      url: "/tab",
      abstract: true,
      templateUrl: "templates/tabs.html"
    })
    .state('tabs.home', {
      url: "/home",
      views: {
        'home-tab': {
          templateUrl: "templates/home.html",
          controller: 'HomeTabCtrl'
        }
      }
    })
    .state('tabs.facts', {
      url: "/facts",
      views: {
        'home-tab': {
          templateUrl: "templates/facts.html"
        }
      }
    })
    .state('tabs.facts2', {
      url: "/facts2",
      views: {
        'home-tab': {
          templateUrl: "templates/facts2.html"
        }
      }
    })
    .state('tabs.about', {
      url: "/about",
      views: {
        'about-tab': {
          templateUrl: "templates/about.html"
        }
      }
    })
   .state('tabs.aboutFacts2', {
      url: "/about/facts2",
      views: {
        'about-tab': {
          templateUrl: "templates/facts2.html"
        }
      }
    })

这不会解决您的问题，但也不会导致问题。 Facts2正在取代两个不同的视图，可以从两个不同的上下文访问，保持导航历史记录紧密。

子URL

1 个答案: