Ionic-framework: Sidemenu 模板、ion-nav-back-button、ion-navicon 和 $state.go('/app/playlists');

创建于 2015-01-04 · 3评论 · 资料来源: ionic-team/ionic-framework

sidemenu 模板有几个在 app.js 中定义的嵌套状态。当您导航到嵌套状态（例如，“app.single”）时，离子导航栏会使用“<返回”按钮进行更新。

当您返回“主页”（“/app/playlists”）时，后退按钮将替换为 ion-navicon（参见 menu.html）。您还可以通过向控制器添加一个简单的功能来转换到主页 (playlists.html)：

$scope.goHome = function() {
  $state.go('app.playlists');
};

如果添加另一个级别的嵌套状态：

.state('app.playlists.classic-rock', {
  url: "/classic-rock",
  views: {
    'menuContent<strong i="10">@app</strong>': {
      templateUrl: "templates/classic-rock.html",
       controller: 'ClassicRockController'
    }
  }
})

并从您切换到主页的视图控制器调用 goHome() 函数，但是后退按钮没有被 ion-navicon 替换？

如果您从一个视图导航到另一个视图然后返回“主页”，情况也是如此：

http://localhost :8100/#/app/playlists (ion-nav-bar 有 ion-navicon)
http://localhost :8100/#/app/playlists/1 (ion-nav-bar 有 '< Back' 按钮)
http://localhost :8100/#/app/playlists/2 (ion-nav-bar 有 '< Back' 按钮)
http://localhost :8100/#/app/playlists (ion-nav-bar 有 '< Back' 按钮但应该有 ion-navicon)

资料来源

RobFerguson

最有用的评论

所以你所描述的和标记实际上是正确的。

http://codepen.io/mhartington/pen/azwojR

您所描述的是由 menu-close 属性引起的。

http://ionicframework.com/docs/api/directive/menuClose/

因此，当您通过侧菜单导航时，具有菜单关闭属性的链接将清除历史记录并防止显示后退按钮。

在您的情况下，您通过$state.go进行导航，它没有 menu-close 提供的逻辑。

所以你需要添加一点。

$scope.goHome = function() {
  $state.go('app.playlists');
  $ionicHistory.nextViewOptions({
    historyRoot: true
  });
};

mhartington 于 2015-02-18

👍6

所有3条评论

在 sidemenu 模板的 menu.html 中：

<ion-nav-bar class="bar-stable">
     <ion-nav-back-button>
      </ion-nav-back-button>

      <ion-nav-buttons side="left">
       <button class="button button-icon button-clear ion-navicon" 
            menu-toggle="left">
       </button>
      </ion-nav-buttons>
</ion-nav-bar>

ion-nav-buttons 必须是 ion-nav-view 的直接后代，而不是ion-nav-bar。

更新 menu.html：

<ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>
</ion-nav-bar>

并更新了 playlists.html：

<ion-view view-title="Playlists">

    <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" 
            menu-toggle="left">
        </button>
    </ion-nav-buttons>

  <ion-content>
    <ion-list>
      <ion-item ng-repeat="playlist in playlists" 
          href="#/app/playlists/{{playlist.id}}">
          {{playlist.title}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

RobFerguson 于 2015-01-05

所以你所描述的和标记实际上是正确的。

http://codepen.io/mhartington/pen/azwojR

您所描述的是由 menu-close 属性引起的。

http://ionicframework.com/docs/api/directive/menuClose/

因此，当您通过侧菜单导航时，具有菜单关闭属性的链接将清除历史记录并防止显示后退按钮。

在您的情况下，您通过$state.go进行导航，它没有 menu-close 提供的逻辑。

所以你需要添加一点。

$scope.goHome = function() {
  $state.go('app.playlists');
  $ionicHistory.nextViewOptions({
    historyRoot: true
  });
};

mhartington 于 2015-02-18

👍6

谢谢@mhartington....
它解决了我的问题...

foram-patel 于 2016-09-07

此页面是否有帮助？

0 / 5 - 0 等级

Ionic-framework: Sidemenu 模板、ion-nav-back-button、ion-navicon 和 $state.go('/app/playlists');

最有用的评论

所有3条评论

相关问题