0

Моей проблема заключается в том, что, когда я перейти от дома государства user.tab1 состояния, кнопка назад не отображается в навигационной панели, как можно решить эту проблему, я новичок в ионныеion-nav-back-button не отображается с моей структурой проекта?

у меня есть это говорит в моем проекте:

var app = angular.module('myApp', ['ionic']); 
    app 
    .config(function ($stateProvider, $urlRouterProvider) { 
     $stateProvider 
      .state('home', { 
       url: '/home', 
       templateUrl: './templates/test/home.html' 
      }) 
      .state('user', { 
       url: '/user', 
       templateUrl: './templates/test/user.html' 
      }) 
      .state('user.tab1', { 
       url: '/tab1', 
       views: { 
        'tab1': { 
         templateUrl: './templates/test/tab1.html' 
        } 
       } 
      }) 
      .state('user.subtab1', { 
       url: '/subtab1', 
       views: { 
        'tab1': { 
         templateUrl: './templates/test/sub-tab1.html' 
        } 
       } 
      }) 
      .state('user.tab2', { 
       url: '/tab2', 
       views: { 
        'tab2': { 
         templateUrl: './templates/test/tab2.html' 
        } 
       } 
      }); 
     $urlRouterProvider.otherwise("/home"); 
    }); 

и эти шаблоны:

index.html

<body ng-app="myApp"> 
    <ion-nav-bar class="bar bar-calm"> 
     <ion-nav-back-button> 
     </ion-nav-back-button> 
    </ion-nav-bar> 
    <ion-nav-view> 
    </ion-nav-view> 
</body> 

home.html

<ion-view view-title="Home"> 
    <ion-content> 
     <a ui-sref="user.tab1">user.tab1</a> 
    </ion-content> 
</ion-view> 

user.html

<ion-view view-title="User"> 
    <ion-tabs> 
     <ion-tab title="tab1" href="#/user/tab1"> 
      <ion-nav-view name="tab1"></ion-nav-view> 
     </ion-tab> 

     <ion-tab title="tab2" href="#/user/tab2"> 
      <ion-nav-view name="tab2"></ion-nav-view> 
     </ion-tab> 
    </ion-tabs> 
</ion-view> 

tab1.html

<ion-view view-title="tab1"> 
    <ion-content> 
     tab1 
     <br /> 
     <a ui-sref="user.subtab1">user.subtab1</a> 
    </ion-content> 
</ion-view> 

tab2.html

<ion-view view-title="tab2"> 
    <ion-content> 
     tab2 
    </ion-content> 
</ion-view> 

суб-tab1.html

<ion-view view-title="sub-tab1"> 
    <ion-content> 
     sub-tab1 
    </ion-content> 
</ion-view> 

UPDATE

я изменил состояния к ним, но опять же, когда я перейти от состояния дома пользователю, кнопка возврата не отображается:

$stateProvider 
     .state('main', { 
      url: '/main', 
      abstract: true, 
      templateUrl: './templates/test/main.html' 
     }) 
     .state('home', { 
      url: '/home', 
      parent: 'main', 
      views: { 
       'home-view': { 
        templateUrl: './templates/test/home.html' 
       } 
      } 
     }) 
     .state('user', { 
      url: '/user', 
      parent: 'main', 
      views: { 
       'user-view': { 
        templateUrl: './templates/test/user.html' 
       } 
      } 
     }) 

main.html

<ion-nav-view name="home-view"> 
</ion-nav-view> 

<ion-nav-view name="user-view"> 
</ion-nav-view> 
+0

В вашем пользовательском состоянии: change 'parent: 'main'' to' parent:' home'' –

+0

не работает! @AndreKreienbring –

ответ

1

Проблема здесь состоит в том, что ваше состояние пользователя не ребенок вашего родного государства. В вашей конфигурации только состояния tab1 & tab2 являются дочерними элементами состояния пользователя.

Следовательно, кнопка «Назад» не отображается.

Пример:

.state('home', { 
    url: '/home', 
    templateUrl: 'templates//test/home.html' 
    }) 

    .state('home.user', {... 

Познакомимся с понятием абстрактного состояния, как корень навигации. Абстрактное состояние - это состояние, к которому нельзя перейти. Как объясняется в this question.

+0

Не могли бы вы помочь мне, как я могу решить эту проблему? –

+0

Посмотрите на это [codepen] (http://codepen.io/TimothyKrell/pen/bnukj). Это объясняет ... –

+0

Да, но я не понимаю, не могли бы вы изменить мои ошибки в вышеупомянутых шаблонах и сценариях? –

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