我正在使用Ionic（使用AngularJS）处理Cordova应用程序，但我遇到了问题。我的应用程序具有在浏览器中打开的外部链接。当我点击这些链接时，我被带到网页，但是当按下后退按钮返回应用程序时，我丢失了我的后退按钮，我的主页按钮不起作用，有效地使我的导航无用。我不完全确定如何处理这个，好像我只是离开应用程序并重新输入它导航工作正常，所以它似乎是从应用程序本身链接到某些东西。它发生在Android和我的网络浏览器中运行文件的计算机上。理想情况下，让导航记住它的位置，并提供准确的“后退”。功能会很棒，但即使只是将我送回主页也会很有用。我看了一下路由和位置，但我不太确定它们是如何适应Cordova应用程序的。任何指导都将受到赞赏，因为我对angularJS相当新。
app.js
var app = angular.module('app', ['ionic']);
app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
.state('tabs.home', {
url: "/home",
views: {
'home-tab': {
templateUrl: "templates/home.html",
controller: 'HomeTabCtrl'
}
}
})
.state('tabs.resources', {
url: "/resources",
views: {
'home-tab': {
templateUrl: "templates/resources.html",
controller: "AdditionalResourcesCtrl"
}
}
})
.state('tabs.gmetrics', {
url: "/gmetrics",
views: {
'home-tab': {
templateUrl: "templates/gmetrics.html",
controller: "GlobalMetricsCtrl"
}
}
})
.state('tabs.gfeed', {
url: "/gfeed",
views: {
'home-tab': {
templateUrl: "templates/gfeed.html"
}
}
})
.state('tabs.googleforms', {
url: "/googleforms",
views: {
'home-tab': {
templateUrl: "templates/googleforms.html"
}
}
})
.state('tabs.social', {
url: "/social",
views: {
'home-tab': {
templateUrl: "templates/social.html",
controller: "SocialNetworkCtrl"
}
}
})
.state('tabs.chapters', {
url: "/chapters",
views: {
'home-tab': {
templateUrl: "templates/chapters.html"
}
}
});
$urlRouterProvider.otherwise("/tab/home");
});
app.config(['$ionicConfigProvider', function ($ionicConfigProvider) {
$ionicConfigProvider.tabs.position('bottom'); //other values: top
}]);
/*
app.config( ['$compileProvider', function( $compileProvider ){
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto):/);
}]);
*/
部分index.html：
<body ng-app ="app">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script id="templates/tabs.html" type="text/ng-template">
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="Home" icon="ion-home" href="#/tab/home">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
<!--
<ion-tab title="About" icon="ion-ios-information" href="#/tab/about">
<ion-nav-view name="about-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Contact" icon="ion-ios-world" ui-sref="tabs.contact">
<ion-nav-view name="contact-tab"></ion-nav-view>
</ion-tab>
-->
</ion-tabs>
</script>
<script id="templates/home.html" type="text/ng-template">
<ion-view view-title="Home">
<ion-content class="padding">
<div class="list">
<a class="item item-icon-right" href="#/tab/resources">
<i class="icon ion-chevron-right"></i>
Additional Resources
</a>
<a class="item item-icon-right" href="#/tab/gmetrics">
<i class="icon ion-chevron-right"></i>
Global Metrics
</a>
<a class="item item-icon-right" href="#/tab/gfeed">
<i class="icon ion-chevron-right"></i>
Global Feed
</a>
<a class="item item-icon-right" href="#/tab/googleforms">
<i class="icon ion-chevron-right"></i>
Google Forms
</a>
<a class="item item-icon-right" href="#/tab/social">
<i class="icon ion-chevron-right"></i>
Social Networking
</a>
<a class="item item-icon-right" href="#/tab/chapters">
<i class="icon ion-chevron-right"></i>
Chapters
</a>
</div>
</ion-content>
</ion-view>
</script>
<script id="templates/resources.html" type="text/ng-template">
<ion-view view-title="Resources">
<ion-content class="padding">
<h1>Additional Resources</h1>
<div class="list list-inset">
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" ng-model="searchfilter" placeholder="Search" />
</label>
</div>
<div class="item item-divider">Outreach Planning Worksheets</div>
<ion-list>
<ion-item ng-repeat="item in outreachplanningworksheets | filter:searchfilter | orderBy:'name'">
<a class="plainLink" ng-href="{{item.link}}">{{item.name}}</a>
</ion-item>
</ion-list>
<div class="item item-divider">Leadership</div>
<ion-list>
<ion-item ng-repeat="item in leadership | filter:searchfilter | orderBy:'name'">
<a class="plainLink" ng-href="{{item.link}}">{{item.name}}</a>
</ion-item>
</ion-list>
<div class="item item-divider">Legal</div>
<ion-list>
<ion-item ng-repeat="item in legal | filter:searchfilter | orderBy:'name'">
<a class="plainLink" ng-href="{{item.link}}">{{item.name}}</a>
</ion-item>
</ion-list>
<div class="item item-divider">Witnessing</div>
<ion-list>
<ion-item ng-repeat="item in witnessing | filter:searchfilter | orderBy:'name'">
<a class="plainLink" ng-href="{{item.link}}">{{item.name}}</a>
</ion-item>
</ion-list>
<div class="item item-divider">Rallies</div>
<ion-list>
<ion-item ng-repeat="item in rallies | filter:searchfilter | orderBy:'name'">
<a class="plainLink" ng-href="{{item.link}}">{{item.name}}</a>
</ion-item>
</ion-list>
<div class="item item-divider">Follow-Up</div>
<ion-list>
<ion-item ng-repeat="item in followup | filter:searchfilter | orderBy:'name'">
<a class="plainLink" ng-href="{{item.link}}">{{item.name}}</a>
</ion-item>
</ion-list>
<div class="item item-divider">Mobilization</div>
<ion-list>
<ion-item ng-repeat="item in mobilization | filter:searchfilter | orderBy:'name'">
<a class="plainLink" ng-href="{{item.link}}"><h2>{{item.name}}</h2></a>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
</script>
<script id="templates/gmetrics.html" type="text/ng-template">
<ion-view view-title="Metrics">
<ion-content class="padding">
<div data-update-data>
<h1>Metrics</h1>
<p>Schools Coached: {{schoolsYear}}</p>
<p>Gospel Presentations: {{gospelpresYear}}</p>
<p>Gospel Presentations: {{ralliesYear}}</p>
<p>Gospel Presentations: {{receiveYear}}</p>
<p>Schools Coached: {{schoolsAlltime}}</p>
<p>Gospel Presentations: {{gospelpresAlltime}}</p>
<p>Gospel Presentations: {{ralliesAlltime}}</p>
<p>Gospel Presentations: {{receiveAlltime}}</p>
</div>
</ion-content>
</ion-view>
</script>