在 AngularJS 中的页面之间共享数据返回空 [英] Sharing Data between pages in AngularJS returning empty

问题描述

通常我会编写 SPA 并且在控制器之间共享数据很简单，使用服务.

我没有使用 SPA 格式(不使用 ng-view)，并尝试在页面之间共享数据，但在加载第二个页面(以获取数据)时为空.

PAGE1 (index.html):

<input type="text" ng-model="myValue"><div ng-click="share(myValue)">分享</div>

PAGE2:

<p>{{ sharedData }}</p>

JS:

app.controller('CreateList', function($scope, $location, $http, serviceShareData) {$scope.share= 函数(selectedValue){如果(selectedValue === 未定义){console.log ("它的未定义");}别的 {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 = 函数(newObj){myData.push(newObj);}var getData = function(){返回我的数据；}返回 {添加数据:添加数据，获取数据:获取数据};});

这是一个 plunkr:http://plnkr.co/edit/6VHJhirnHZxBpKOvqzI6?p=preview

解决方案

有多种方法可以在页面之间共享数据 - 本地存储、会话存储、indexedDB、cookie 或者您甚至可以像这样将数据作为参数传递:

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

以下是使用 sessionStorage 时您的服务可能看起来如何的简单示例:

app.service('serviceShareData', function($window) {var KEY = 'App.SelectedValue';var addData = 函数(newObj){var mydata = $window.sessionStorage.getItem(KEY);如果(我的数据){mydata = JSON.parse(mydata);} 别的 {我的数据 = [];}mydata.push(newObj);$window.sessionStorage.setItem(KEY, JSON.stringify(mydata));};var getData = function(){var mydata = $window.sessionStorage.getItem(KEY);如果(我的数据){mydata = JSON.parse(mydata);}返回我的数据 ||[];};返回 {添加数据:添加数据，获取数据:获取数据};});

Plunkr 位于这里.

Typically i write SPA's and sharing data between controllers is simple with a service.

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.

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
    };
});

Here's a plunkr: http://plnkr.co/edit/6VHJhirnHZxBpKOvqzI6?p=preview

解决方案

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:

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

Here is a quick example of how your service may be looking using 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.

这篇关于在 AngularJS 中的页面之间共享数据返回空的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！