Ionic：在嵌套状态中导航会破坏历史记录和 ion-nav-back-button答案

【问题标题】：Ionic : Navigate in nested states breaks history and ion-nav-back-buttonIonic：在嵌套状态中导航会破坏历史记录和 ion-nav-back-button
【发布时间】：2016-07-05 16:06:48
【问题描述】：

似乎不可能导航到兄弟姐妹的子状态或祖先的子状态。

我使用的解决方法是将所有状态置于同一级别，这样我就可以导航到我需要的任何状态（从推送通知导航到嵌套状态，从一个嵌套状态导航到另一个父级中的状态等...）。

这种方法的问题是状态和控制器不继承任何代码，导致代码重复。此外，在某些情况下，导航只是被破坏并且 ion-nav-back-button 无法正常运行。

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');
    }]);

【问题讨论】：

标签： ionic-framework angular-ui-router

【解决方案1】：

经过一些研究，它与 IonTabs 和分离的 ion-nav-views 相关。（看看这张照片：http://ionicframework.com/img/diagrams/tabs-nav-stack.png）

在这种情况下，最好使用仅使用一个 ion-nav-view 的自定义“选项卡”实现替换选项卡，如下所示：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>';
      }
    };
  }]
);

【讨论】：