加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angular自定义服务 历史回退到“上一个页面”

发布时间:2020-12-17 09:58:46 所属栏目:安全 来源:网络整理
导读:在实际项目中,某个页面的入口可能是有多个,但是用户回退的时候,是希望进入之前进来的界面,这样就需要浏览器记住进来的界面 解决办法一(使用历史回退): 代码如下 $scope.goBack = function(){window.history.back();}; 上面的解决方案存在缺陷,应用场

在实际项目中,某个页面的入口可能是有多个,但是用户回退的时候,是希望进入之前进来的界面,这样就需要浏览器记住进来的界面

解决办法一(使用历史回退):

代码如下

$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);
	}
}

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读