在AngularJS中的頁面之間共享數據返回空

通常我編寫SPA並在控制器之間共享數據對於服務來說很簡單。在AngularJS中的頁面之間共享數據返回空

我沒有使用SPA格式（不使用ng-view），並試圖在頁面之間共享數據，但是在加載第二頁（獲取數據）時它是空的。

PAGE1（index.html的）：

<div ng-controller="CreateList"> 
    <input type="text" ng-model="myValue"> 
    <div ng-click="share(myValue)">Share</div> 
</div>

PAGE2：

<div ng-controller="GeList"> 
    <p>{{ sharedData }}</p> 
</div>

JS：

app.controller('CreateList', function($scope, $location, $http, serviceShareData) { 

    $scope.share= function (selectedValue) { 

     if (selectedValue === undefined) { 
      console.log ("its undefined"); 
     }  
     else { 
      console.log (selectedValue); 

      serviceShareData.addData(selectedValue); 
      window.location.href = "PAGE2.html"; 
     } 
    } 

}); 


app.controller('GeList', function($scope, $location, $http, serviceShareData) { 

    $scope.sharedData = serviceShareData.getData(); 

    console.log($scope.sharedData); 

}); 

app.service('serviceShareData', function() { 
    var myData = []; 

    var addData = function(newObj) { 
     myData.push(newObj); 
    } 

    var getData = function(){ 
     return myData; 
    } 

    return { 
     addData: addData, 
     getData: getData 
    }; 
});

這裏有一個plunkr：http://plnkr.co/edit/6VHJhirnHZxBpKOvqzI6?p=preview

來源

2015-04-04 Oam Psy

一個不同的應用程序將在page2.html實例化，所以該服務將是一個新的服務，你的數據消失了。 – 2015-04-04 16:45:46

只要SPA被加載，共享只能工作。只要您重定向\刷新頁面，數據將會丟失。 – Chandermani 2015-04-04 16:46:43

有多種方式共享頁之間的數據 - 本地存儲，會話存儲，索引資料，餅乾或者你甚至可以傳給你的數據作爲這樣的放慢參數：

window.location.href = 'page2.html?val=' + selectedValue;

下面是一個簡單的例子如何您的服務可以使用的sessionStorage尋找：

app.service('serviceShareData', function($window) { 
    var KEY = 'App.SelectedValue'; 

    var addData = function(newObj) { 
     var mydata = $window.sessionStorage.getItem(KEY); 
     if (mydata) { 
      mydata = JSON.parse(mydata); 
     } else { 
      mydata = []; 
     } 
     mydata.push(newObj); 
     $window.sessionStorage.setItem(KEY, JSON.stringify(mydata)); 
    }; 

    var getData = function(){ 
     var mydata = $window.sessionStorage.getItem(KEY); 
     if (mydata) { 
      mydata = JSON.parse(mydata); 
     } 
     return myData || []; 
    }; 

    return { 
     addData: addData, 
     getData: getData 
    }; 
});

Plunkr是here。

來源

2015-04-06 23:16:53

很好的例子和猛擊。快速問題，什麼是App.SelectedValue – 2015-04-08 08:28:18

@OamPsy會話存儲是一個鍵值存儲引擎。 App.SelectedValue實際上是用於讀取/寫入數據的關鍵。可以是任何東西。 – 2015-04-08 16:54:21

當你重裝這樣

window.location.href = 「PAGE2.html」頁面;

該應用程序被所有控制器，服務等重新初始化。在您的服務中使用網絡存儲來存儲數據。

不要在您的應用程序中使用默認的js窗口對象。如果您需要使用位置信息，請使用$ location服務。如果您需要獲取窗口屬性，請使用$ window對象。

使用ng-view或者嘗試ui-router。

來源

2015-04-04 21:04:20 IvanMalenko

在AngularJS中的頁面之間共享數據返回空

回答

相關問題