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 相关文章推荐
url 编码 js url传参中文乱码解决方案
Apr 11 Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
May 24 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
Oct 08 Javascript
jquery基础教程之deferred对象使用方法
Jan 22 Javascript
JavaScript中的单引号和双引号报错的解决方法
Sep 01 Javascript
谈一谈js中的执行环境及作用域
Mar 30 Javascript
jQuery实现三级联动效果
Mar 02 Javascript
vue.js系列中的vue-fontawesome使用
Feb 10 Javascript
Vue中v-for的数据分组实例
Mar 07 Javascript
js实现轮播图的完整代码
Oct 26 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
Aug 24 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
Sep 26 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
JS+PHP实现用户输入数字后显示最大的值及所在位置
2017/06/19 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
PHP的imageTtfText()函数深入详解
2021/03/03 PHP
基于JQuery的抓取博客园首页RSS的代码
2011/12/01 Javascript
来自国外的30个基于jquery的Web下拉菜单
2012/06/22 Javascript
JS 两个字符串时间的天数差计算
2013/08/25 Javascript
使用js解决由border属性引起的div宽度问题
2013/11/26 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
2014/06/30 Javascript
在JavaScript中处理时间之getHours()方法的使用
2015/06/10 Javascript
Javascript刷新窗口方法小结
2015/10/21 Javascript
javascript中使用未定义变量或值的情况分析
2016/07/19 Javascript
nodejs根据ip数组在百度地图中进行定位
2017/03/06 NodeJs
Javascript实现倒计时时差效果
2017/05/18 Javascript
简单实现JavaScript弹幕效果
2020/08/27 Javascript
JavaScript动态绑定详解
2017/09/14 Javascript
vue 点击按钮实现动态挂载子组件的方法
2018/09/07 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
2019/11/25 Javascript
JavaScript中使用Spread运算符的八种方法总结
2020/06/18 Javascript
利用JavaScript为句子加标题的3种方法示例
2021/01/05 Javascript
[01:03:38]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS CIS
2014/05/22 DOTA
[03:36]DOTA2完美大师赛coL战队趣味视频——我演你猜
2017/11/23 DOTA
Python写的贪吃蛇游戏例子
2014/06/16 Python
python之从文件读取数据到list的实例讲解
2018/04/19 Python
对Python之gzip文件读写的方法详解
2019/02/08 Python
python实现两个字典合并,两个list合并
2019/12/02 Python
Python使用正则实现计算字符串算式
2019/12/29 Python
细数nn.BCELoss与nn.CrossEntropyLoss的区别
2020/02/29 Python
Python爬虫之Selenium实现关闭浏览器
2020/12/04 Python
真正了解CSS3背景下的@font face规则
2017/05/04 HTML / CSS
DataReader和DataSet的异同
2014/12/31 面试题
团队经理竞聘书
2014/03/31 职场文书
应聘会计求职信
2014/06/11 职场文书
2014年大学团支部工作总结
2014/12/02 职场文书
2016年暑期教师培训心得体会
2016/01/09 职场文书
CSS3实现的文字弹出特效
2021/04/16 HTML / CSS
Python多线程 Queue 模块常见用法
2021/07/04 Python