首页 文章

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

提问于
浏览 次
0

我有一个侧边菜单：

<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>

当应用程序打开时，我会自动发送到帐户页面 . 我可以轻松点击“汉堡包”进入滑出导航，其中有几个其他页面可以访问 . 在帐户页面中，有一个帐户列表 . 我在详细查看账户时遇到了“深入研究”的麻烦 . 侧边菜单在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

请注意，用户不应该从帐户返回菜单 . 他们需要点击“后退”按钮然后转到菜单 . 在移动应用中非常标准 .

javascript angularjs ionic-framework ionic

2 回答

  • 0

    问题是你如何定义最后一条路线 . 问题出在这一行 /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'
    }
  }
});
    回复于
  • 0

    我认为需要对状态名称进行两次更改，对于url进行第二次更改

    • 将州名 .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

    回复于

相关问题