Question

我想使用角度服务将数据从一个页面传输到另一个页面。我可以从一个页面将数据存储在服务中，但是当我尝试使用不同的控制器从另一个页面获取数据时，数据不可用。

我在类似的问题上提出了问题但是已经提到的解决方案显示可以使用该服务在同一页面上的控制器之间传输数据。

我的问题是：是否可以使用角度服务在不同页面之间传输数据？

以下是我尝试过的代码段：

Page1.html

<body ng-controller="SearchController as searchCtrl">

<form name="searchForm" id="center" novalidate>

    <input type="text" id="searchInput" placeholder="Search " ng-model = "searchCtrl.search.searchText" required/>
    <input type="button" id="searchButton" value="Search" ng-click = "searchForm.$valid && searchCtrl.performSearch()"/>

</form>

</body>

Page2.html

<body ng-controller="ResultStoreController as resultStoreCtrl">
<div>
    <p>Search Value: {{resultStoreCtrl.data()}}</p>
</div>
</body>

app.js

(function(){
    var dummyApp = angular.module('dummyApp',[]);
    /**
     * Create a new service, so that data can be shared between the controllers.
     */
    dummyApp.service('peerSearchResultSharingService',function(){

        var results;

        return{
            storeResults: function(value){
                results = value;
            },
            fetchResults: function(){
                return results;
            }
        }

    });


    dummyApp.config(function($locationProvider){
        $locationProvider.html5Mode(true);
    });

    dummyApp.controller('SearchController',['$scope','$location','$window', 'peerSearchResultSharingService',function( $scope, $location, $window, peerSearchResultSharingService){

        var search ={};
        this.performSearch = function(){

          peerSearchResultSharingService.storeResults(search.searchText);
          $window.location.href ="http://localhost:63342/TestAngular/app/views/Page2.html";

        };
    }]);



    dummyApp.controller('ResultStoreController',['peerSearchResultSharingService',function(peerSearchResultSharingService){
            var data;
            data = peerSearchResultSharingService.fetchResults();
     }]);


})();

由于

Answer 1

简短回答：不使用普通的Angular服务，至少。

长答案：发出新请求会卸载当前加载的javascript，这意味着也会丢弃存储的模型。所有后备逻辑将再次使用新页面加载，因此您的数据将重置为默认值。

将您的应用转变为单页应用程序可以解决您的问题，因为该服务可以正常工作。

如果你真的打算继续使用多个页面，你需要一个Angular债券之外的临时容器来存储信息并在下一页中检索它（即localstorage，服务器端或设置cookie）。

使用角度服务在不同页面之间传输数据？

1 个答案: