Question

我有一个侧边菜单：

<ion-side-menu side="left">
    <ion-header-bar class="bar-stable">
      <h1 id="menu-title" class="title">John Doe</h1>
    </ion-header-bar>

    <ion-content id="menu-content">
      <ion-list>
        <ion-item nav-clear menu-close href="#/app/account" class="menu-item">
          account
        </ion-item>

当应用程序打开时，我会自动发送到帐户页面。我可以轻松点击＆＃34;汉堡＆＃34;进入滑出导航，我可以访问其他几个页面。在帐户页面中，有一个帐户列表。我遇到了麻烦＆＃34;钻井＆＃34;进入详细的帐户视图。侧边菜单在menu.html中定义。以下是路线：

.config(function($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state('app', {
                url: '/app',
                abstract: true,
                templateUrl: 'templates/menu.html',
                controller: 'AppCtrl'
            })
            .state('app.accounts', {
                url: '/accounts',
                views: {
                    'menuContent': {
                        templateUrl: 'templates/account.html'
                    }
                }
            })
            .state('app.accounts/accountId', {
                url: '/accounts/accountId',
                views: {
                    'menuContent': {
                        templateUrl: 'templates/account-detail.html'
                    }
                }
            })
$urlRouterProvider.otherwise('/app/home');

第三个状态不起作用。这个名字（目前是menuContent）是什么？我如何从侧边菜单的上下文中正确地路由这个？链接在帐户列表页面中会是什么样的？类似的东西：

<a href="#/accounts/myid">view account</a>

生成的视图配置如下所示：

enter image description here

请注意，用户不应该从帐户返回菜单。他们需要回到“后面”。按钮然后转到菜单。非常标准的移动应用程序。

Answer 1

问题是你如何定义最后一条路线。问题出在这条线上 /accounts/accountId。仅当URL与完全相同的URL字符串匹配时，才会显示该路由。如果要在/之后获取值并在控制器中使用它，请执行以下操作：

.state('app.account', 
    url: '/accounts/{accountId}', //you can get the value of after the `/` in your controller using the `$stateParams` object.
    views: {
    menuContent': {
     templateUrl: 'templates/account-detail.html'
    }
  }
});

Answer 2

我认为需要对状态名称进行两项更改，对于网址

进行第二次更改

将州名.state('app.accounts/accountId',更改为.state('app.account-detail',

将网址从url: '/accounts/accountId'更改为url: '/accounts/{accountId}'

.state('app.account-detail', 
    url: '/accounts/{accountId}', //you can get the value of after the `/` in your controller using the `$stateParams` object.
    views: {
     menuContent': {
     templateUrl: 'templates/account-detail.html'
     }
    }
  });

州名可以在其中有一个点表示来显示parent.child，但我怀疑是parent.child / something是允许的。这就是原因，没有路由匹配，并且考虑使用$urlRouterProvider.otherwise('/app/home')

href应传递与绑定的帐户项关联的相应ID。类似这样的事件< a href ="#/accounts/{{account.id}}">确切的特征实现在离子的tabs模板应用程序中给出。尝试使用此ionic start <your-app-name> tabs创建一个新项目，然后查看app.js以了解如何定义路径和tab-chats.html在templates文件夹下以了解如何指定href

离子推动侧面菜单中的视图

2 个答案: