javascript 在 AngularJS 中的页面之间共享数据返回空
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29448794/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Sharing Data between pages in AngularJS returning empty
提问by Oam Psy
Typically i write SPA's and sharing data between controllers is simple with a service.
通常，我编写 SPA 并在控制器之间共享数据对于服务来说很简单。
I am not using an SPA format (not using ng-view), and trying to share data between pages but on load of the second page (to get data) its empty.
我没有使用 SPA 格式（不使用 ng-view），并尝试在页面之间共享数据，但在加载第二页（获取数据）时它是空的。
PAGE1 (index.html):
PAGE1 (index.html):
<div ng-controller="CreateList">
<input type="text" ng-model="myValue">
<div ng-click="share(myValue)">Share</div>
</div>
PAGE2:
第2页：
<div ng-controller="GeList">
<p>{{ sharedData }}</p>
</div>
JS:
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
};
});
Here's a plunkr: http://plnkr.co/edit/6VHJhirnHZxBpKOvqzI6?p=preview
这是一个 plunkr：http://plnkr.co/edit/6VHJhirnHZxBpKOvqzI6?p=preview
回答by Yauheni Leichanok
There is a number of ways to share data between pages - local storage, session storage, indexedDB, cookies or you can even pass you data as a paramter like this:
有多种方法可以在页面之间共享数据 - 本地存储、会话存储、indexedDB、cookies，或者您甚至可以像这样将数据作为参数传递：
window.location.href = 'page2.html?val=' + selectedValue;
Here is a quick example of how your service may be looking using sessionStorage:
下面是一个使用 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 is here.
Plunkr 在这里。
回答by IvanMalenko
When you reload the page like this
当你像这样重新加载页面时
window.location.href = "PAGE2.html";
window.location.href = "PAGE2.html";
the application is initialized again with all controllers, services, etc. Use web storage in your service to store data.
应用程序将再次使用所有控制器、服务等进行初始化。在您的服务中使用 Web 存储来存储数据。
Don't use default js window object in your app. If you need to work with location, use $location service. If you need to get window properties, use $window object.
不要在您的应用中使用默认的 js 窗口对象。如果您需要处理位置，请使用 $location 服务。如果需要获取窗口属性，请使用 $window 对象。
Use ng-view or try ui-router.
使用 ng-view 或尝试 ui-router。
