来自子URL的Ionic和Angular-ui-router导航问题-Java 学习之路

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

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

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

当没有＃/ tab / facts2进入上面的codepen时，导航按预期发生 - 我可以点击'Scientific Facts'按钮，向下导航几个孩子，然后点击'Home'图标并返回到root .

当输入第二个URL时，我会按照我的预期直接进入facts2页面 . 但是，点击“主页”图标总会让我回到事实2 .

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

有趣的是，如果我使用facts2页面上的“home”按钮，它会正确导航到Home，但导航图标将无效 .

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

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

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正在取代两个不同的视图，可以从两个不同的上下文访问，保持导航历史紧凑 .

回复于 2024-04-29T06:43:29+08:00

来自子URL的Ionic和Angular-ui-router导航问题

1 回答

相关问题