Ionic framework Ionic：在嵌套状态下导航中断历史记录和Ionion导航返回按钮_Ionic Framework_Angular Ui Router

Ionic framework Ionic：在嵌套状态下导航中断历史记录和Ionion导航返回按钮

ionic-framework

Ionic framework Ionic：在嵌套状态下导航中断历史记录和Ionion导航返回按钮,ionic-framework,angular-ui-router,Ionic Framework,Angular Ui Router,似乎不可能导航到兄弟姐妹的子状态或祖先的子状态我使用的解决方法是将所有状态放在同一级别上，这允许我导航到我需要的任何状态（从推送通知导航到嵌套状态，从一个嵌套状态导航到另一个父级内的状态，等等…）该方法的问题是状态和控制器不继承任何代码，从而导致代码重复。此外，在某些情况下，导航系统被破坏，ion nav back（导航返回）按钮不能正常工作 TLTR：当您使用选项卡和嵌套状态时，必须使用什么结构才能拥有一个完全可导航的应用程序（检查笔？以下是描述问题的钢笔： HTML: <html

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

我使用的解决方法是将所有状态放在同一级别上，这允许我导航到我需要的任何状态（从推送通知导航到嵌套状态，从一个嵌套状态导航到另一个父级内的状态，等等…）

该方法的问题是状态和控制器不继承任何代码，从而导致代码重复。此外，在某些情况下，导航系统被破坏，ion nav back（导航返回）按钮不能正常工作

TLTR：当您使用选项卡和嵌套状态时，必须使用什么结构才能拥有一个完全可导航的应用程序（检查笔？

以下是描述问题的钢笔：

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>

<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:

var-app=angular.module(
“应用程序”[
“爱奥尼亚”
]
);
app.run(
函数（$ionicPlatform，$rootScope）{
$ionicPlatform.ready(
函数（）{
if（window.cordova&&window.cordova.plugins.Keyboard）{
插件键盘hideKeyboardAccessoryBar（真）；
插件。键盘。禁用滚动（真）；
}
如果（窗口状态栏）{
StatusBar.styleDefault（）；
}
}
);
}
);
app.config（函数（$stateProvider，$urlRouterProvider）{
$stateProvider
.state（'应用程序'{
url:“/app”，
摘要：没错，
模板：“”
})
.state（'app.tabs'{
url:“/tabs”，
摘要：没错，
templateUrl:'tabs.html'
})
.state（'app.tabs.home'{
url:“/home”，
观点：{
“制表符主页”：{
templateUrl:'home.html'
}
}
})
.state（'app.other'{
url:“/其他”，
templateUrl:'other.html'
})
.state（'app.tabs.themes'{
url:“/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。否则（'/app/tabs/home'）；
});
app.config(
['$ionicConfigProvider'，函数（$ionicConfigProvider）{
$ionicConfigProvider.tabs.position（'bottom'）；
$ionicConfigProvider.navBar.alignTitle（'center'）；
}]);

经过一些研究，它与ion选项卡和分离的ion导航视图有关。（查看此图片：）

在这种情况下，最好仅使用一个ion nav视图将选项卡替换为自定义“选项卡”实现，如下所示：

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>

<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”，
函数（）{
返回{
限制：'E'，
编译：函数（元素、属性）{
var footer=angular.element（“”）；
var-tabs=elem.find（'better-tab'）；
元素追加（页脚）；
追加页脚（制表符）；
if（属性样式）{
footer.addClass（'bar-'+attrs.style）；
}
}
};
}
);
应用程序指令(
“betterTab”，
['$state'，函数（$state）{
返回{
范围：{
声明：“@”，
根状态：“@”，
标题：“@”
},
限制：'E'，
必填项：[“^betterTabs]”，
链接：功能（范围）{
范围.$state=$state；
},
模板：函数（）{
返回“{title}}”；
}
};
}]
);

经过一些研究，它与ion选项卡和分离的ion导航视图有关。（查看此图片：）

在这种情况下，最好仅使用一个ion nav视图将选项卡替换为自定义“选项卡”实现，如下所示：

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>

<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”，
函数（）{
返回{
限制：'E'，
编译：函数（元素、属性）{
var footer=angular.element（“”）；
var-tabs=elem.find（'better-tab'）；
元素追加（页脚）；
追加页脚（制表符）；
if（属性样式）{
footer.addClass（'bar-'+attrs.style）；
}
}
};
}
);
应用程序指令(
“betterTab”，
['$state'，函数（$state）{
返回{
范围：{
声明：“@”，
根状态：“@”，
标题：“@”
},
限制：'E'，
必填项：[“^betterTabs]”，
链接：功能（范围）{
范围.$state=$state；