2015-02-26 3 views
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

Обратите внимание, что пользователь не должен быть в состоянии пойти со счетов обратно в меню. Им нужно нажать кнопку «назад», затем перейти в меню. Довольно стандартно в мобильных приложениях.

ответ

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

это все еще не дает мне правильного поведения. Представление будет нажато, но это представление по умолчанию, заданное с помощью $ urlRouterProvider.otherwise ('/ app/home') – thebiglebowski11

0

Я думаю, что два изменения должны быть сделаны один для имени государства и второй по URL

  1. Изменить состояние имя .state('app.accounts/accountId', в .state('app.account-detail',

  2. Изменение URL из 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/что-то разрешено. В этом причина не сопоставляется маршрутизация и рассматривается значение по умолчанию с $urlRouterProvider.otherwise('/app/home')

href должен передать соответствующий идентификатор, связанный с привязанным элементом учетной записи. что-то вроде этого < a href ="#/accounts/{{account.id}}"> точная реализация функции дана в приложении шаблона tabs ионного. попробуйте создать новый проект с этим ionic start <your-app-name> tabs, а затем посмотрите на app.js для понимания того, как определять маршруты и tab-chats.html в папке шаблонов для понимания того, как указать href

+0

, поэтому href все равно будет находиться в этой форме: ?? – thebiglebowski11

Смежные вопросы