在 AngularJS 中的页面之间共享数据返回空

Question

通常我编写 SPA 并且通过服务在控制器之间共享数据很简单。

我没有使用 SPA 格式（不使用 ng-view），并尝试在页面之间共享数据，但在加载第二页（获取数据）时它是空的。

第 1 页 (index.html):

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

第 2 页：

<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

Answer 1

当您像这样重新加载页面时

window.location.href = "PAGE2.html";

应用程序使用所有控制器、服务等再次初始化。在您的服务中使用网络存储来存储数据。

不要在您的应用中使用默认的 js window 对象。如果您需要使用位置，请使用 $location 服务。如果需要获取 window 属性，请使用 $window 对象。

使用 ng-view 或尝试 ui-router。

Answer 2

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

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。

在 AngularJS 中的页面之间共享数据返回空

Sharing Data between pages in AngularJS returning empty

javascript

angularjs

angularjs-scope

angular-services