当前位置： 移动技术网 > IT编程>脚本编程>AngularJs > Angularjs实现多个页面共享数据的方式

Angularjs实现多个页面共享数据的方式

2018年06月17日  | 移动技术网IT编程  | 我要评论

废话不多说了，直接看干货吧。

使用service来共享数据

定义一个共享服务的service

//家电维修共享数据的服务 
angular.module("sqhapp").factory("repairdevicedatashareserver",function($http,$state,$ionicpopup){ 
return { 
//缓存当前需要维修的设备名称、数量、唯一标识 
devicerepairobj : [], 
//小区位置 
xiqulocation:{}, 
//预约时间 
appointmentdate:{ 
"date":"", 
"time":"" 
}, 
//预约日期界面回退到上一个界面的记录 
appointmentbackpage:"", 
//获取地址回退界面记录 
locationbackpage:"", 
//家电维修描述 
questiondesc:"", 
//确认预约 
confirmappointment : function(resultjson){ 
var url = "/index.php/wap/homemake/createrepairorder.html"; 
var p = $http.post(url,resultjson); 
p.success(function(response,header,config,status){ 
//提交订单成功 
if(response.status == 0){ 
//提示需要选择设备 
var alertpopup = $ionicpopup.alert({ 
title: '家电维修', 
template: response.msg 
}); 
alertpopup.then(function(res) { 
$state.go("appliance_index"); 
}); 
}else{ 
//提示需要选择设备 
var alertpopup = $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(){ 
var backpage = repairdevicedatashareserver.appointmentbackpage; 
//如果没有记录值，则跳转到家电清洗服务包目录 
if(backpage == ""){ 
$state.go("appliance_index"); 
}else{ 
$state.go(backpage); 
} 
} 
//选择时间 
$scope.selecttime = function(myevent){ 
var currentobj = $(myevent.target); 
currentobj.closest("div.time_list").find(".line_height_35px").removeclass("bg_fdd000 color_e5005a").addclass("bg_ff"); 
currentobj.addclass("bg_fdd000 color_e5005a").removeclass("bg_ff"); 
}; 
//选择日期 
$scope.selectdate = function(myevent){ 
var currentobj = $(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(){ 
var selectobjs = $(".bg_f8f8f8 .color_e5005a"); 
//获取日期对象 
var dateobj = $(selectobjs[0]); 
if(dateobj.length ==　0){ 
alert("请选择日期"); 
return false; 
} 
//获取时间对象 
var timeobj = $(selectobjs[1]); 
if(timeobj.length ==　0){ 
alert("请选择时间"); 
return false; 
} 
//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实现多个页面共享数据的方式就给大家介绍这么多，希望对大家有所帮助！

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网