在实际项目中,某个页面的入口可能是有多个,但是用户回退的时候,是希望进入之前进来的界面,这样就需要浏览器记住进来的界面
解决办法一(使用历史回退):
代码如下
$scope.goBack = function(){ window.history.back(); };
上面的解决方案存在缺陷,应用场景如下:
A 进入 B页面,B回退到A界面,能够正常显示
A 进入 B页面,B进入C界面,然后从C回退到B页面,最后由B页面做“历史回退”,
现象:B回退到了C界面,不满足要求
解决办法二(定义一个service专门用于记录历史回退地址)
1、定义一个记录历史地址的service
/** * 备注: * 不直接返回json对象的好处是形成了一个“闭包”,外界只能通过方法访问内部的属性backUrl * */ angular.module("hkApp").factory("historyUrlService",["$state",function($state){ //用于记录上一个页面的历史地址 var backUrl = ""; function setBackUrl(url){ backUrl = url; } function getBackUrl(){ return backUrl; } /** * 根据statement * */ function goUrlByState(state){ $state.go(state); } /** * 根据url跳转 * */ function goUrlBuyUrl(url){ window.location.href = url; } return { "goUrlBuyUrl":goUrlBuyUrl,"goUrlByState":goUrlByState,"setBackUrl":setBackUrl,"getBackUrl":getBackUrl } }]);
2、进入下一个页面之前,记录当前页面
<div class="item padding_top_5 padding_bottom_5 bg_f2f2f3"> <div class="row padding_left_10 padding_right_10 "> <a class="button button-full all_width margin_0 bg_ff border_radius_4" style="margin:0;border:1px solid #000" ng-click="toSalesOrderList()"> 销售明细 </a> </div> </div>
angular.module("hkApp").controller("salesGoodsCollectController",["$scope","$state",'salesGoodsCollectService','historyUrlService',function ($scope,$state,salesGoodsCollectService,historyUrlService) { /* * 跳转到 销售明细 * */ $scope.toSalesOrderList = function(){ historyUrlService.setBackUrl(window.location.href); $state.go('salesOrderList'); }; }]);
3、回退到上一个页面,需要拿到“记录的地址”
<ion-header-bar class="" align-title="center"> <a class="button button-clear" ng-click="goBack()"> <span class="icon ion-ios-arrow-left"></span> </a> <h1 class="title">销售明细</h1> </ion-header-bar>
/** * 回退到上一个页面 */ $scope.goBack = function(){ var url = historyUrlService.getBackUrl(); if(url == ""){ historyUrlService.goUrlByState("index"); }else{ historyUrlService.goUrlBuyUrl(url); } }