Маршрутизация в ionic с вложенными вкладками не работает

Здравствуйте, я новичок в ionic и angular js. Я только вчера запустил фреймворк, но я действительно застрял в процессе, описанном ниже. Я пытаюсь создать вложенные вкладки внутри другого представления. Однако это не работает. так что это часть списка моего меню для вкладок:

    <ion-item class="item-icon-left" menu-close href="#/app/browse">
      <i class="icon ion-ios-stopwatch"></i>
      browse
    </ion-item>
    <ion-item class="item-icon-left" menu-close href="#/app/tab">
      <i class="icon ion-ios-calendar"></i>
      tabs
    </ion-item>

это мой вид вкладок:

    <ion-view view-title="Tabs">
      <ion-content>
        <ion-tabs class="tabs-icon-top tabs-color-active-positive">
          <ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/app/tab/dash">
            <ion-nav-view name="tab-dash"></ion-nav-view>
          </ion-tab>
          <ion-tab title="Chats" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/app/tab/chats">
            <ion-nav-view name="tab-chats"></ion-nav-view>
          </ion-tab>

          <ion-tab title="Account" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/app/tabs/account">
            <ion-nav-view name="tab-account"></ion-nav-view>
          </ion-tab>


        </ion-tabs>

      </ion-content>
    </ion-view>

скрипт angular js для маршрутизации:

  .state('app', {
    url: "/app",
    abstract: true,
    templateUrl: "templates/menu.html",
    controller: 'AppCtrl'
  })
  .state('app.browse', {
    url: "/browse",
    views: {
      'menuContent': {
        templateUrl: "templates/browse.html"
      }
    }
  })    
  .state('app.tab',{
    url: "/tab",
    abstract: true,
    views: {
      'menuContent': {
        templateUrl: "templates/tabs.html"
      }
    }
  })
  .state('app.tab.dash',{
    url: "/dash",
    views: {
      'tab-dash': {
        templateUrl: "templates/tab-dash.html"
      }
    }
  })

из списка меню состояние просмотра работает нормально, однако состояние вкладок не загружается с помощью вышеуказанного скрипта, но загружается, если я удаляю его абстрактное свойство. Не говоря уже о том, что вложенное состояние тире вкладок никогда не загружается.


cordova ionic-framework angularjs ionic
person sumanthapamagar    schedule 29.05.2015    source источник
comment
+1, столкнулся с той же проблемой. В любом случае, я думаю, было бы хорошо, если бы вы упомянули Ionic версию, которую вы используете. FWIW, я на 1.0.0.   -  person Guillem Vicens    schedule 29.05.2015
comment
добавьте codepen или plunkr плз   -  person aorfevre    schedule 29.05.2015
comment
я тоже использую ionic 1.0.0   -  person sumanthapamagar    schedule 29.05.2015

Ответы (3)


arrow_upward
0
arrow_downward

Пробовали ли вы переоборудовать свой код в пример вкладок и навигации Codepen? У меня была аналогичная проблема, но после этого пример был быстрым решением.

Убедитесь, что ваш:

href="#/app/tabs/account"

указывают на правильный href для вашего проекта. Если у вас есть codepen, я могу посмотреть глубже.

person FHair    schedule 29.05.2015

arrow_upward
0
arrow_downward

Вам нужно сделать просмотр и вкладку своим собственным состоянием и URL-адресом шаблона. Они не должны быть дочерним шаблоном состояния приложения. Пожалуйста, попробуйте ffg. модификации..

.state('app', {
        url: "/app",
        abstract: true,
        templateUrl: "templates/menu.html",
        controller: 'AppCtrl'
      })

  .state('browse', {
    url: "/browse",
    templateUrl: "templates/browse.html",
    controller: 'BrowseCtrl'
  })  

  .state('tab',{
    url: "/tab",
    templateUrl: "templates/tabs.html",
    controller: 'TabsCtrl'
  })

  .state('tab.dash',{
    url: "/dash",
    views: {
      'tab-dash': {
        templateUrl: "templates/tab-dash.html"
      },
    controller: 'DashCtrl'
    }
  })

.state('tab.chats',{
        url: "/chats",
        views: {
          'tab-chats': {
            templateUrl: "templates/tab-chats.html"
          },
    controller: 'ChatsCtrl'
        }
      })

.state('tab.account',{
        url: "/account",
        views: {
          'tab-account': {
            templateUrl: "templates/tab-account.html"
          },
    controller: 'AccountCtrl'
        }
      })

затем, чтобы получить доступ к вкладкам.. вам нужно использовать этот шаблон URL-адреса - href="#/tab/dash", href="#/tab/account" и так далее...

Надеюсь это поможет! :)

person balfonso    schedule 29.05.2015

arrow_upward
0
arrow_downward

Немного поздно, но здесь я создал для этого codepen. Это обновляет дочернее представление, когда нажимается кнопка или элемент бокового меню, с более подробной информацией внутри кода, заставляя несколько дочерних представлений иметь такое имя, как так

 views: {
        'shared-child-view' :{
          templateUrl: "[path to your children, in our case child1.html and child2.html]"
        }
      }`

Вы можете переключать или изменять каждое дочернее представление внутри представления на каждое представление с тем же именем, в данном случае общее-дочернее-состояние.

  <div ui-view name="shared-child-view"></div>

и его можно сделать кликабельным с помощью

<a href="#/sidemenu/parent/child2" class="item">Child View 2
              </a>

Это не работает, если вы используете ui-serf.

Я надеюсь, что это поможет кому-то!

person garrettmac    schedule 01.12.2015