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 相关文章推荐
TextArea不支持maxlength的解决办法(jquery)
Sep 13 Javascript
javascript中input中readonly和disabled区别介绍
Oct 23 Javascript
javascript中的事件代理初探
Mar 08 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
Oct 14 Javascript
javascript拖拽应用实例
Mar 25 Javascript
js操作XML文件的实现方法兼容IE与FireFox
Jun 25 Javascript
Bootstrap零基础入门教程(二)
Jul 18 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
Oct 14 Javascript
AngularJS的ng Http Request与response格式转换方法
Nov 07 Javascript
React应用中使用Bootstrap的方法
Aug 15 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
Nov 28 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
Sep 06 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
菜鸟修复电子管记
2021/03/02 无线电
php split汉字
2009/06/05 PHP
深入理解require与require_once与include以及include_once的区别
2013/06/05 PHP
用js实现控制内容的向上向下滚动效果
2007/06/26 Javascript
HTML 自动伸缩的表格Table js实现
2009/04/01 Javascript
jquery 滚动条事件简单实例
2013/07/12 Javascript
JS实现点击按钮后框架内载入不同网页的方法
2015/05/05 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
2015/06/19 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
2016/07/08 Javascript
js添加千分位的实现代码(超简单)
2016/08/01 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
2016/10/11 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
2017/03/02 Javascript
jQuery简单判断值是否存在于数组中的方法示例
2018/04/17 jQuery
基于Vue插入视频的2种方法小结
2019/04/02 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
2020/10/30 Javascript
[02:34]2016完美“圣”典风云人物:BurNIng专访
2016/12/10 DOTA
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
各个系统下的Python解释器相关安装方法
2015/10/12 Python
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
由浅入深讲解python中的yield与generator
2017/04/05 Python
Python获取当前页面内所有链接的四种方法对比分析
2017/08/19 Python
python+opencv实现动态物体识别
2018/01/09 Python
如何使用Python的Requests包实现模拟登陆
2018/04/27 Python
python脚本实现验证码识别
2018/06/07 Python
Django框架创建mysql连接与使用示例
2019/07/29 Python
Flask框架模板渲染操作简单示例
2019/07/31 Python
python rsa实现数据加密和解密、签名加密和验签功能
2019/09/18 Python
Python语法之精妙的十个知识点(装B语法)
2020/01/18 Python
python要安装在哪个盘
2020/06/15 Python
Skip Hop官网:好莱坞宝宝挚爱品牌
2018/06/17 全球购物
加多宝凉茶广告词
2014/03/18 职场文书
和解协议书
2014/04/16 职场文书
公诉意见书范文
2015/06/05 职场文书
Mysql 用户权限管理实现
2021/05/25 MySQL
分析Python list操作为什么会错误
2021/11/17 Python
《传颂之物 虚伪的假面》BD发售宣传CM公开
2022/04/04 日漫