Angularjs实现多个页面共享数据的方式
废话不多说了,直接看干货吧。
使用service来共享数据
定义一个共享服务的service
//家电维修共享数据的服务 angular.module("sqhApp").factory("repairDeviceDataShareServer",function($http,$state,$ionicPopup){ return{ //缓存当前需要维修的设备名称、数量、唯一标识 deviceRepairObj:[], //小区位置 xiquLocation:{}, //预约时间 appointmentDate:{ "date":"", "time":"" }, //预约日期界面回退到上一个界面的记录 appointmentBackPage:"", //获取地址回退界面记录 locationBackPage:"", //家电维修描述 questionDesc:"", //确认预约 confirmAppointment:function(resultJson){ varurl="/index.php/Wap/Homemake/createRepairOrder.html"; varp=$http.post(url,resultJson); p.success(function(response,header,config,status){ //提交订单成功 if(response.status==0){ //提示需要选择设备 varalertPopup=$ionicPopup.alert({ title:'家电维修', template:response.msg }); alertPopup.then(function(res){ $state.go("appliance_index"); }); }else{ //提示需要选择设备 varalertPopup=$ionicPopup.alert({ title:'家电维修', template:response.msg }); alertPopup.then(function(res){ }); } }); }, //确认预约提交的数据 formData:{} }; });
跳转到一个新的页面,将repairDeviceDataShareServer注入到controller中
//预约时间控制器 angular.module("sqhApp").controller("orderDateController",["$scope","$state", '$ionicPopup','repairDeviceDataShareServer','appointmentDateService', function($scope,$state,$ionicPopup,repairDeviceDataShareServer,appointmentDateService){ $scope.lists=[]; //从服务器获取时间 appointmentDateService.getAppointmentDateList($scope); //回退到上一个页面 $scope.back=function(){ varbackPage=repairDeviceDataShareServer.appointmentBackPage; //如果没有记录值,则跳转到家电清洗服务包目录 if(backPage==""){ $state.go("appliance_index"); }else{ $state.go(backPage); } } //选择时间 $scope.selectTime=function(myevent){ varcurrentObj=$(myevent.target); currentObj.closest("div.time_list").find(".line_height_35px").removeClass("bg_fdd000color_e5005a").addClass("bg_ff"); currentObj.addClass("bg_fdd000color_e5005a").removeClass("bg_ff"); }; //选择日期 $scope.selectDate=function(myevent){ varcurrentObj=$(myevent.target); currentObj.closest("div.overflow_hidden").find("div.float_left").removeClass("color_e5005a"); currentObj.closest("div.float_left").addClass("color_e5005a"); }; //确认时间日期 $scope.confirmDateTime=function(){ varselectObjs=$(".bg_f8f8f8.color_e5005a"); //获取日期对象 vardateObj=$(selectObjs[0]); if(dateObj.length==0){ alert("请选择日期"); returnfalse; } //获取时间对象 vartimeObj=$(selectObjs[1]); if(timeObj.length==0){ alert("请选择时间"); returnfalse; } //repairDeviceDataShareServer.appointmentDate.date=dateObj; repairDeviceDataShareServer.appointmentDate.date="2016-6-6"; repairDeviceDataShareServer.appointmentDate.time=timeObj.html(); this.back(); }; }]);
跳转到一个新的页面中,然后重置repairDeviceDataShareServer里面的数据
angular.module("sqhApp").controller("applianceIndexController",["$scope","$state","repairDeviceDataShareServer","applianceWashShareServer",function($scope,$state,repairDeviceDataShareServer,applianceWashShareServer){ //初始化家电维修共享数据 repairDeviceDataShareServer.deviceRepairObj=[]; repairDeviceDataShareServer.xiquLocation={}; repairDeviceDataShareServer.appointmentDate={"date":"","time":""}; repairDeviceDataShareServer.appointmentBackPage={}; repairDeviceDataShareServer.locationBackPage={}; repairDeviceDataShareServer.formData={}; repairDeviceDataShareServer.questionDesc=""; //初始化家电清洗共享数据 applianceWashShareServer.washType=""; applianceWashShareServer.formData={}; applianceWashShareServer.goodsSelected=[]; }]);
关于本文给大家分享的Angularjs实现多个页面共享数据的方式就给大家介绍这么多,希望对大家有所帮助!