Angularjs實現多個頁面共用資料的方式_AngularJS

廢話不多說了，直接看乾貨吧。

使用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實現多個頁面共用資料的方式就給大家介紹這麼多，希望對大家有所協助！