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


Posted in Javascript onMarch 29, 2016

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

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

Javascript 相关文章推荐
在网页中控制wmplayer播放器
Jul 01 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
Oct 23 Javascript
js AppendChild与insertBefore用法详细对比
Dec 16 Javascript
javascript回车完美实现tab切换功能
Mar 13 Javascript
jQuery级联操作绑定事件实例
Sep 02 Javascript
node.js操作mysql(增删改查)
Jul 24 Javascript
javascript+canvas实现刮刮卡抽奖效果
Jul 29 Javascript
JavaScript学习笔记之惰性函数示例详解
Aug 27 Javascript
Cpage.js给组件绑定事件的实现代码
Aug 31 Javascript
vue使用keep-alive实现数据缓存不刷新
Oct 21 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
Nov 09 Javascript
react中hook介绍以及使用教程
Dec 11 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
Mar 29 #Javascript
JavaScript面向对象程序设计教程
Mar 29 #Javascript
jQuery实现图片加载完成后改变图片大小的方法
Mar 29 #Javascript
Web前端开发工具——bower依赖包管理工具
Mar 29 #Javascript
Jquery操作cookie记住用户名
Mar 29 #Javascript
jQuery简单实现提交数据出现loading进度条的方法
Mar 29 #Javascript
Javascript设计模式之观察者模式(推荐)
Mar 29 #Javascript
You might like
蝙蝠侠:侠影之谜
2020/03/04 欧美动漫
PHP 采集获取指定网址的内容
2010/01/05 PHP
Linux下创建nginx脚本-start、stop、reload…
2014/08/03 PHP
php实现的简单美国商品税计算函数
2015/07/13 PHP
YII框架批量插入数据的方法
2017/03/18 PHP
PHP+Redis事务解决高并发下商品超卖问题(推荐)
2020/08/03 PHP
jQuery中的常用事件总结
2009/12/27 Javascript
jquery checkbox,radio是否选中的判断代码
2010/03/20 Javascript
使用jquery读取html5 localstorage的值的方法
2013/01/04 Javascript
DWR实现模拟Google搜索效果实现原理及代码
2013/01/30 Javascript
js中的for如何实现foreach中的遍历
2014/05/31 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
2014/06/03 Javascript
一个JavaScript递归实现反转数组字符串的实例
2014/10/14 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
2015/11/26 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
2016/04/30 Javascript
Bootstrap Table的使用总结
2016/10/08 Javascript
node.js 和HTML5开发本地桌面应用程序
2016/12/13 Javascript
微信公众号菜单配置微信小程序实例详解
2017/03/31 Javascript
JS中的数组转变成JSON格式字符串的方法
2017/05/09 Javascript
Node.js搭建WEB服务器的示例代码
2018/08/15 Javascript
总结4个方面优化Vue项目
2019/02/11 Javascript
vue 实现 rem 布局或vw 布局的方法
2019/11/13 Javascript
[51:53]完美世界DOTA2联赛决赛日 Inki vs LBZS 第二场 11.08
2020/11/10 DOTA
深入Python解释器理解Python中的字节码
2015/04/01 Python
PYTHON 中使用 GLOBAL引发的一系列问题
2016/10/12 Python
python三引号输出方法
2019/02/27 Python
python实现高斯判别分析算法的例子
2019/12/09 Python
利用Python实现Json序列化库的方法步骤
2020/09/09 Python
Deux par Deux官方网站:设计师童装
2020/01/03 全球购物
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
和解协议书
2014/04/16 职场文书
泰山导游词
2015/02/02 职场文书
2015年质检工作总结
2015/05/04 职场文书
唱歌比赛拉拉队口号
2015/12/25 职场文书
Java实现多线程聊天室
2021/06/26 Java/Android
Mysql数据库表中为什么有索引却没有提高查询速度
2022/02/24 MySQL