2016-07-01 4 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:それはIonTabsと分離イオンnav-に関連しているいくつかの研究の後

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

再生回数ここに示したように一つだけのイオン-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>'; 
     } 
    }; 
    }] 
); 
関連する問題