Javascript 使用服务在Angular中不同应用程序的控制器之间传输数据

因此，我试图将数据从网站的首页表单传递到网站上的应用程序，用户可以在其中填写一些附加信息

我的问题是，每次从服务获取对象后，我都会显示console.log信息，但它是未定义的。但是，我可以在设置对象时使用console.log，这是正确的

你知道我可能做错了什么吗？我假设这是因为我认为当服务被注入时，它会创建一个新的实例。如何使数据持久化

我在头版上有一张表格：

<div id="zipcodeForm" ng-app="form">
    <form name="zipcodeLookup" ng-controller="FormCtrl" novalidate="true" ng-submit="zipcodeLookup.$valid &amp;&amp; submitForm()">
        <div class="error" ng-show="zipcodeLookup.$dirty &amp;&amp; zipcodeLookup.$invalid">
            <span ng-show="zipcodeLookup.zipcode.$error.pattern || zipcodeLookup.zipcode.$error.required === true">Please enter a valid zip code.<br /></span>
            <span ng-show="zipcodeLookup.residence.$error.required === true">Please choose a residency type.</span>
        </div>
        Enter Zipcode:
        <input type="text" id="zipcode" name="zipcode" required="true" ng-pattern="/^\d{{5}}(-\d{{4}})?$/" ng-model="zipcode" ng-model-options="{{debounce: 1000}}"/><br />
        <input type="radio" name="residence" value="residential" ng-model="residence" ng-required="!residence"/> Residential
        <input type="radio" name="residence" value="business" ng-model="residence" ng-required="!residence" /> Business
        <br />
        <input type="submit" id="submitButton" value="Submit" />
    </form>
</div>

表格管理员：

formApp.controller('FormCtrl', ['$scope', '$element', 'FormService', function($scope, $element, formService) {

    $scope.zipcode = "";
    $scope.residence = "";

    $scope.submitForm = function() {

        var obj, object, data = $element.serializeArray();

        obj = {};

        for (object in data) {

            obj[data[object].name] = data[object].value;

        }

        formService.set(obj);

        window.location = '/application';

    };

}]);

app.controller('HomeCtrl', ['FormService', function(formService) {

    var data = formService.get();

    console.log(data);

}]);

家庭控制器：

formApp.controller('FormCtrl', ['$scope', '$element', 'FormService', function($scope, $element, formService) {

    $scope.zipcode = "";
    $scope.residence = "";

    $scope.submitForm = function() {

        var obj, object, data = $element.serializeArray();

        obj = {};

        for (object in data) {

            obj[data[object].name] = data[object].value;

        }

        formService.set(obj);

        window.location = '/application';

    };

}]);

app.controller('HomeCtrl', ['FormService', function(formService) {

    var data = formService.get();

    console.log(data);

}]);

服务：

angular.module('formService', [])
    .factory('FormService', function() {

    var savedData = {};

    function set(data) {

        savedData = data;

    }

    function get() {

        return savedData;

    }

    return {
        set: set,
        get: get
    };

});

---

你说得对，创建了两个实例，每个应用定义一个。如果要在这两个实例之间持久化数据，唯一的选择是读取和写入服务外部定义的全局变量

---

然而，这当然是不建议的。我想知道为什么你必须在一个页面上启动两个应用程序，我想至少是这样。是否无法将两个应用程序合并为一个？如果是这样，我会选择这种策略。

这两个应用程序在不同的页面上，这是一种奇怪的情况。我们的CMS使用XSLT，所以在主页上，我有一个模板，它有表单，然后我有另一个页面，它是/应用程序，它使用另一个XSLT模板，它有第二个应用程序，它使用角度ui路由。因此，我并不认为有办法将它们都放在同一个应用程序中，但如果我错了，请随时纠正我。这不是角度限制，而是html文档的本质。您可以选择通过本地存储、cookie保存数据，甚至通过url传递信息。每种策略都有其局限性。节省的方法是将数据作为会话数据或数据库保存在web服务器上。