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 相关文章推荐
javascript cookie操作类的实现代码小结附使用方法
Jun 02 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
Dec 28 Javascript
探讨jQuery的ajax使用场景(c#)
Dec 03 Javascript
用js的document.write输出的广告无阻塞加载的方法
Jun 05 Javascript
详解JavaScript中setSeconds()方法的使用
Jun 11 Javascript
javascript中的3种继承实现方法
Jan 27 Javascript
浅析JavaScript回调函数应用
May 22 Javascript
js字符串引用的两种方式(必看)
Sep 18 Javascript
遍历json 对象的属性并且动态添加属性的实现
Dec 02 Javascript
javascript基础知识之html5轮播图实例讲解(44)
Feb 17 Javascript
JS文件中加载jquery.js的实例代码
May 05 jQuery
JavaScript中变量提升和函数提升的详解
Aug 07 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
PHP的开发框架的现状和展望
2007/03/16 PHP
php判断手机访问还是电脑访问示例分享
2014/01/20 PHP
PHP防止表单重复提交的几种常用方法汇总
2014/08/19 PHP
php session的锁和并发
2016/01/22 PHP
完美解决php 导出excle的.csv格式的数据时乱码问题
2017/02/18 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
javascript 兼容鼠标滚轮事件
2009/04/07 Javascript
javascript setTimeout和setInterval计时的区别详解
2013/06/21 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
2014/01/25 Javascript
javascript闭包的理解
2015/04/01 Javascript
轻松学习Javascript闭包函数
2015/12/15 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
2016/08/05 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
2017/06/17 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
2017/07/20 Javascript
浅谈Angular4实现热加载开发旅程
2017/09/08 Javascript
基于vue中keep-alive缓存问题的解决方法
2018/09/21 Javascript
详解Vue2.5+迁移至Typescript指南
2019/08/01 Javascript
node.js基础知识汇总
2020/08/25 Javascript
vue3为什么要用proxy替代defineProperty
2020/10/19 Javascript
vue3.0 加载json的方法(非ajax)
2020/10/26 Javascript
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
一个基于flask的web应用诞生 flask和mysql相连(4)
2017/04/11 Python
对pandas进行数据预处理的实例讲解
2018/04/20 Python
Python结合ImageMagick实现多张图片合并为一个pdf文件的方法
2018/04/24 Python
python实现录音功能(可随时停止录音)
2020/10/26 Python
Python txt文件如何转换成字典
2020/11/03 Python
苹果美国官方商城:Apple美国
2016/08/24 全球购物
戴森台湾线上商城:Dyson Taiwan
2018/05/21 全球购物
在校大学生个人的自我评价
2014/02/13 职场文书
国培计划培训感言
2014/03/11 职场文书
我的祖国演讲稿
2014/05/04 职场文书
银行求职自荐信
2014/06/30 职场文书
财务审计整改报告
2014/11/06 职场文书
专业技术职务聘任证明
2015/03/02 职场文书
新教师2015年度工作总结
2015/07/22 职场文书
Linux安装Nginx步骤详解
2021/03/31 Servers