Angularjs實現(xiàn)多個頁面共享數(shù)據(jù)的方式
廢話不多說了,直接看干貨吧。
使用service來共享數(shù)據(jù)
定義一個共享服務(wù)的service
//家電維修共享數(shù)據(jù)的服務(wù) angular.module("sqhApp").factory("repairDeviceDataShareServer",function($http,$state,$ionicPopup){ return { //緩存當(dāng)前需要維修的設(shè)備名稱、數(shù)量、唯一標(biāo)識 deviceRepairObj : [], //小區(qū)位置 xiquLocation:{}, //預(yù)約時間 appointmentDate:{ "date":"", "time":"" }, //預(yù)約日期界面回退到上一個界面的記錄 appointmentBackPage:"", //獲取地址回退界面記錄 locationBackPage:"", //家電維修描述 questionDesc:"", //確認(rèn)預(yù)約 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){ //提示需要選擇設(shè)備 var alertPopup = $ionicPopup.alert({ title: '家電維修', template: response.msg }); alertPopup.then(function(res) { $state.go("appliance_index"); }); }else{ //提示需要選擇設(shè)備 var alertPopup = $ionicPopup.alert({ title: '家電維修', template: response.msg }); alertPopup.then(function(res) { }); } }); }, //確認(rèn)預(yù)約提交的數(shù)據(jù) formData:{} }; });
跳轉(zhuǎn)到一個新的頁面,將repairDeviceDataShareServer注入到controller中
//預(yù)約時間控制器 angular.module("sqhApp").controller("orderDateController", ["$scope", "$state", '$ionicPopup', 'repairDeviceDataShareServer','appointmentDateService', function ($scope, $state, $ionicPopup,repairDeviceDataShareServer,appointmentDateService) { $scope.lists=[]; //從服務(wù)器獲取時間 appointmentDateService.getAppointmentDateList($scope); //回退到上一個頁面 $scope.back = function(){ var backPage = repairDeviceDataShareServer.appointmentBackPage; //如果沒有記錄值,則跳轉(zhuǎn)到家電清洗服務(wù)包目錄 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"); }; //確認(rèn)時間日期 $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(); }; }]);
跳轉(zhuǎn)到一個新的頁面中,然后重置repairDeviceDataShareServer里面的數(shù)據(jù)
angular.module("sqhApp").controller("applianceIndexController", ["$scope", "$state","repairDeviceDataShareServer","applianceWashShareServer", function ($scope, $state, repairDeviceDataShareServer,applianceWashShareServer) { //初始化家電維修共享數(shù)據(jù) repairDeviceDataShareServer.deviceRepairObj = []; repairDeviceDataShareServer.xiquLocation = {}; repairDeviceDataShareServer.appointmentDate = {"date":"","time":""}; repairDeviceDataShareServer.appointmentBackPage = {}; repairDeviceDataShareServer.locationBackPage = {}; repairDeviceDataShareServer.formData = {}; repairDeviceDataShareServer.questionDesc = ""; //初始化家電清洗共享數(shù)據(jù) applianceWashShareServer.washType=""; applianceWashShareServer.formData={}; applianceWashShareServer.goodsSelected=[]; }]);
關(guān)于本文給大家分享的Angularjs實現(xiàn)多個頁面共享數(shù)據(jù)的方式就給大家介紹這么多,希望對大家有所幫助!
- AngularJS實現(xiàn)分頁顯示數(shù)據(jù)庫信息
- Angular.JS內(nèi)置服務(wù)$http對數(shù)據(jù)庫的增刪改使用教程
- 三種AngularJS中獲取數(shù)據(jù)源的方式
- AngularJS實現(xiàn)數(shù)據(jù)列表的增加、刪除和上移下移等功能實例
- 基于AngularJS實現(xiàn)頁面滾動到底自動加載數(shù)據(jù)的功能
- 詳解angularJs中自定義directive的數(shù)據(jù)交互
- Angular.js如何從PHP讀取后臺數(shù)據(jù)
- Angularjs 滾動加載更多數(shù)據(jù)
- 深入學(xué)習(xí)AngularJS中數(shù)據(jù)的雙向綁定機制
- 在 Angular6 中使用 HTTP 請求服務(wù)端數(shù)據(jù)的步驟詳解
- Angular.JS讀取數(shù)據(jù)庫數(shù)據(jù)調(diào)用完整實例
相關(guān)文章
Angular 4依賴注入學(xué)習(xí)教程之ValueProvider的使用(七)
這篇文章主要給大家介紹了關(guān)于Angular 4依賴注入之ValueProvider使用的相關(guān)資料,文中介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用Angular4具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起看看吧。2017-06-06Angular應(yīng)用打包和部署實現(xiàn)過程詳解
這篇文章主要為大家介紹了Angular應(yīng)用打包和部署實現(xiàn)過程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08Angular4.0中引入laydate.js日期插件的方法教程
在AngularJs中我們會不可避免的使用第三方庫,例如jquery插件庫。下面這篇文章主要給大家介紹了關(guān)于Angular4.0中引入laydate.js日期插件的相關(guān)資料,需要的朋友可以參考借鑒,下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12Angular.Js中ng-include指令的使用與實現(xiàn)
ng-include 指令用于包含外部的 HTML 文件。包含的內(nèi)容將作為指定元素的子節(jié)點。下面這篇文章主要給大家介紹了Angular.Js中ng-include指令的使用與實現(xiàn)的相關(guān)資料,文中介紹的非常詳細(xì),需要的朋友們下面來一起看看吧。2017-05-05AngularJS實現(xiàn)在ng-Options加上index的解決方法
這篇文章主要介紹了AngularJS實現(xiàn)在ng-Options加上index的解決方法,結(jié)合實例形式分析了AngularJS在ngOptions添加索引的操作步驟與相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2016-11-11Angular?Tree?Shaking優(yōu)化機制原理詳解
這篇文章主要為大家介紹了Angular?Tree?Shaking優(yōu)化機制原理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10AngularJS頁面訪問時出現(xiàn)頁面閃爍問題的解決
這篇文章主要介紹了AngularJS框架使用中出現(xiàn)頁面閃爍問題的解決方法,閃爍問題一般是初始化未加載完畢造成的,需要的朋友可以參考下2016-03-03詳解angularJs中關(guān)于ng-class的三種使用方式說明
本篇文章主要介紹了angularJs中關(guān)于ng-class的三種使用方式說明,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06