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

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

使用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实现多个页面共享数据的方式就给大家介绍这么多，希望对大家有所帮助！