2016-07-01 92 views
1

似乎無法導航到兄弟姐妹的子女狀態或祖先的子女狀態。Ionic:在嵌套狀態中導航休息時間歷史記錄和離子導航返回按鈕

我使用的解決方法是將所有狀態放在同一級別,這使我可以導航到任何需要的狀態(從推送通知導航到嵌套狀態,從一個嵌套狀態導航到另一個狀態父母等)。

該方法的問題是狀態和控制器不會繼承任何代碼,導致代碼重複。此外,有些情況下,導航只是簡單的斷開,離子導航返回按鈕的行爲並不像應該那樣。

TLTR:在使用製表符和嵌套狀態時,必須使用哪種結構才能具有完全可導航的應用程序(檢出筆)?

這是說明問題的筆:http://codepen.io/ruslan-fidesio/pen/LkyAkm

HTML:

<html> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
     <title></title> 
     <link href="http://code.ionicframework.com/1.3.1/css/ionic.min.css" rel="stylesheet"> 
     <script src="http://code.ionicframework.com/1.3.1/js/ionic.bundle.min.js"></script> 
    </head> 

    <body ng-app="app"> 
     <ion-nav-view></ion-nav-view> 

     <script id="home.html" type="text/ng-template"> 
      <ion-view view-title="Home"> 
       <ion-content> 
        <br/> 
        <a ui-sref="app.tabs.themes.details">Go to Child : broken</a> 
        <br/> 
        <br/> 
        <a ui-sref="app.other">Go to Other : broken</a> 
       </ion-content> 
      </ion-view> 
     </script> 

     <script id="tabs.html" type="text/ng-template"> 
      <ion-nav-bar class="bar-positive"> 
       <ion-nav-back-button> 
       </ion-nav-back-button> 
      </ion-nav-bar> 
      <ion-tabs class="tabs-positive"> 
       <ion-tab title="home" ui-sref="app.tabs.home"> 
        <ion-nav-view name="tabs-home"></ion-nav-view> 
       </ion-tab> 
       <ion-tab title="themes" ui-sref="app.tabs.themes.list"> 
        <ion-nav-view name="tabs-themes"></ion-nav-view> 
       </ion-tab> 
      </ion-tabs> 
     </script> 

     <script id="themes/abstract.html" type="text/ng-template"> 
      <div class="bar bar-subheader bar-dark" sticky> 
       Themes subheader 
      </div> 
      <ion-nav-view></ion-nav-view> 
     </script> 

     <script id="themes/list.html" type="text/ng-template"> 
      <ion-view view-title="Themes"> 
       <ion-content class="has-subheader"> 
        <p>Parent View</p> 
        <a ui-sref="app.tabs.themes.details">Go to Child : OK !</a> 
       </ion-content> 
      </ion-view> 
     </script> 

     <script id="themes/details.html" type="text/ng-template"> 
      <ion-view view-title="Theme X"> 
       <ion-content class="has-subheader"> 
        Child View 
       </ion-content> 
      </ion-view> 
     </script> 

     <script id="other.html" type="text/ng-template"> 
      <ion-view view-title="Other"> 
       <ion-nav-bar class="bar-positive"> 
        <ion-nav-back-button> 
        </ion-nav-back-button> 
       </ion-nav-bar> 
       <ion-content> 
        <br/> 
        Other View 
        <br/> 
        <a ui-sref="app.tabs.themes.details">Go to Child : broken</a> 
       </ion-content> 
      </ion-view> 
     </script> 
    </body> 

</html> 

JS:

var app = angular.module(
    'app', [ 
     'ionic' 
    ] 
); 

app.run(
    function($ionicPlatform, $rootScope) { 
     $ionicPlatform.ready(
      function() { 
       if (window.cordova && window.cordova.plugins.Keyboard) { 
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 
        cordova.plugins.Keyboard.disableScroll(true); 
       } 

       if (window.StatusBar) { 
        StatusBar.styleDefault(); 
       } 
      } 
     ); 
    } 
); 

app.config(function($stateProvider, $urlRouterProvider) { 
    $stateProvider 
     .state('app', { 
      url: '/app', 
      abstract: true, 
      template: '<ion-nav-view></ion-nav-view>' 
     }) 
     .state('app.tabs', { 
      url: '/tabs', 
      abstract: true, 
      templateUrl: 'tabs.html' 
     }) 
     .state('app.tabs.home', { 
      url: '/home', 
      views: { 
       'tabs-home': { 
        templateUrl: 'home.html' 
       } 
      } 
     }) 
     .state('app.other', { 
      url: '/other', 
      templateUrl: 'other.html' 
     }) 
     .state('app.tabs.themes', { 
      url: '/themes', 
      abstract: true, 
      views: { 
       'tabs-themes': { 
        templateUrl: 'themes/abstract.html' 
       } 
      } 
     }) 
     .state('app.tabs.themes.list', { 
      url: '/list', 
      templateUrl: 'themes/list.html' 
     }) 
     .state('app.tabs.themes.details', { 
      url: '/details', 
      templateUrl: 'themes/details.html' 
     }); 
    $urlRouterProvider.otherwise('/app/tabs/home'); 
}); 

app.config(
    ['$ionicConfigProvider', function($ionicConfigProvider) { 
     $ionicConfigProvider.tabs.position('bottom'); 
     $ionicConfigProvider.navBar.alignTitle('center'); 
    }]); 

回答

0

一些研究,它關係到IonTabs和分離離子nav-後觀點。僅使用一個離子NAV-視圖

在這種情況下,最好是替換定製「選項卡」選項卡執行如下所示: (http://ionicframework.com/img/diagrams/tabs-nav-stack.png檢查出這個畫面):http://codepen.io/ruslan-fidesio/pen/RRgpjL

HTML:

<ion-nav-bar class="bar-positive"> 
    <ion-nav-back-button> 
    </ion-nav-back-button> 
</ion-nav-bar> 
<ion-nav-view></ion-nav-view> 
<better-tabs style="positive"> 
    <better-tab state="app.tabs.home" title="Home"></better-tab> 
    <better-tab state="app.tabs.themes.list" root-state="app.tabs.themes" title="Themes"></better-tab> 
</better-tabs> 

JS:

app.directive(
'betterTabs', 
    function() { 
    return { 
     restrict: 'E', 
     compile: function(elem, attrs) { 
     var footer = angular.element('<ion-footer-bar></ion-footer-bar>'); 
     var tabs = elem.find('better-tab'); 
     elem.append(footer); 
     footer.append(tabs); 

     if (attrs.style) { 
      footer.addClass('bar-' + attrs.style); 
     } 
     } 
    }; 
    } 
); 
app.directive(
    'betterTab', 
    ['$state', function($state) { 
    return { 
     scope: { 
     state: '@', 
     rootState: '@', 
     title: '@' 
     }, 
     restrict: 'E', 
     required: ['^betterTabs'], 
     link: function(scope) { 
     scope.$state = $state; 
     }, 
     template: function() { 
     return '<a ui-sref="{{ state }}" ng-class="{active: $state.includes(\'{{ rootState ? rootState : state }}\')}">{{ title }}</a>'; 
     } 
    }; 
    }] 
);