2014-11-17 2 views
8

Я не могу понять, как получить кнопку «Назад», отображаемую при перемещении от просмотра с вкладками к просмотру одной страницы. В одном представлении страницы не должно быть панели вкладок. Я могу сделать кнопку «Назад», когда я создаю представление. Я перехожу к части иерархии вкладок, но это не то, что я хочу.Ионный: нет кнопки «Назад» при перемещении в сторону от табуляции.

Я искал вокруг и не могу найти сообщение об этой проблеме. Я просто не могу найти правильные ключевые слова.

Мой набор на это ...

вкладки: tab.feed, tab.friends, tab.account

другой вид: Randompage

Вот мой маршрут создан ...

.state('randompage', { 
    url:'/randompage', 
    templateUrl: 'templates/randompage.html', 
    controller: 'RandomPageCtrl' 
}) 

.state('tab', { 
    url: '/tab', 
    abstract: true, 
    templateUrl: 'templates/tabs.html', 
    controller: 'TabCtrl' 
}) 

.state('tab.feed', { 
    url: '/feed', 
    views: { 
    'tab-feed': { 
     templateUrl: 'templates/tab-feed.html', 
     controller: 'FeedCtrl' 
    } 
    } 
}) 

Вот tabs.html

<ion-tabs class="tabs-icon-top tabs-top"> 
    <!-- Feed Tab --> 
    <ion-tab title="Feed" icon="icon ion-ios7-paper" href="#/tab/feed"> 
     <ion-nav-view name="tab-feed"></ion-nav-view> 
    </ion-tab> 

    <!-- The rest are just from the tab skeleton --> 
    <ion-tab title="Friends" icon="icon ion-heart" href="#/tab/friends"> 
     <ion-nav-view name="tab-friends"></ion-nav-view> 
    </ion-tab> 

    <ion-tab title="Account" icon="icon ion-gear-b" href="#/tab/account"> 
     <ion-nav-view name="tab-account"></ion-nav-view> 
    </ion-tab> 
</ion-tabs> 

Вот закладки feed.html

<ion-view title="Feed"> 
    <ion-nav-buttons side="right"> 
     <a class="button button-icon ion-android-camera" href="#/randompage"></a> 
    </ion-nav-buttons> 
    <ion-content class="padding"> 
     <h1>Feed</h1> 
    </ion-content> 
</ion-view> 

Здесь представлен randompage.html

<ion-view title="Random Page"> 
    <ion-content lass="padding"> 
    </ion-content> 
</ion-view> 

Все Переходит и правильно показывает, кроме кнопки назад не отображается.

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

Спасибо!

ответ

7

У меня такая же проблема. Проверяя исходный код, ionic устанавливает стек истории по умолчанию с именем root history, представления выталкиваются и выталкиваются из стека, когда пользователь перемещается по приложению. Однако представление табуляции выводится из этого стека истории по умолчанию, и для него будет настроен новый стек. История

 

    splash view --> tab view --> random page (out of tab) 
         | 
         tab1 --> nested view (in tab) 
         | 
         tab2 --> nested view (in tab) 

корень стека: история

 

    splash view ---> random page 

Вкладка стек:

 

    tab view ---> tab1 --> nested view 
      ---> tab2 --> nested view 

Я не смог найти простой способ изменить это поведение. Но для моего дела есть обходная работа. Я создал нормальный ионный вид и сам создал представление вкладки, поэтому новый стек истории не будет создан.

<ion-view title="tabs"> 
    <ion-content padding="false"> 
     <ion-pane> 
      <ion-nav-view name="tab-content"></ion-nav-view> 
     </ion-pane> 
     <div class="tabs tabs-icon-top" style="position: absolute;bottom: 0;"> 
      <a class="tab-item"> 
       <i class="icon ion-home"></i> 
       Home 
      </a> 
      <a class="tab-item"> 
       <i class="icon ion-star"></i> 
       Favorites 
      </a> 
      <a class="tab-item"> 
       <i class="icon ion-gear-a"></i> 
       Settings 
      </a> 
     </div> 
    </ion-content> 
</ion-view> 

, то вы можете создать свой $ stateProvider, чтобы загрузить другое представление вкладки в закладке-контента имитирует поведение ионно-вкладки. Конечно, вы должны поддерживать активные состояния вкладок самостоятельно.

+0

Да, я начинаю думать, что это путь. Однако я не хотел изобретать колесо. Благодаря! – ThinkNovelty

8

Это было долгое время для меня. Хотя стек истории сломан в этом случае использования, «backView» в объекте истории является правильным. В этой строке журнала можно увидеть полный объект истории:

console.log(JSON.stringify($ionicHistory.viewHistory(), null, 4)); 

Мое решение состоит в том, чтобы вручную добавить кнопку «Назад» на глобальных страницах.

Глобальная страница HTML:

<ion-view view-title="Help"> 

<ion-nav-buttons side="left"> 
<button class="button button-clear" ng-click="goBack()"><i class="icon ion-arrow-left-c" ></i> Back</button> 
</ion-nav-buttons> 

Javascript:

$scope.goBack = function() { 
    $ionicHistory.goBack(); 
}; 

Другой альтернативой является изменение ионного источника. Заменить enabledBack() в ionic.bundle.js с этим:

enabledBack: function(view) { 
    //original code 
    //var backView = getBackView(view); 
    //return !!(backView && backView.historyId === view.historyId); 

    //new code to show back 
    var backView = viewHistory.backView; 
    return backView != null; 
}, 
+0

Это прекрасно работало для меня, спасибо! – mwrazam

+3

Возможно, это не очень хорошая идея для редактирования ионного исходного кода. Одно обновление, и вы не поймете, почему все просто сломано. – nikolasleblanc

1

Я жалею, что не хватает репутации, чтобы добавить комментарий.

ответ Райана работал как шарм для меня (а не изменять ионный источник часть), я просто хочу, чтобы добавить пункт, что если один использует

ng-click="$ionicGoBack()" 

вместо

ng-click="goBack()" 

Javascript могут быть опущены.

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