javascript - Angular - 在一页上获取输入并使用同一 Controller 在第二页上显示值

Question

我正在尝试设置我的 Angular 应用程序以在一页上获取输入，然后将其显示在第二页上。我正在使用 ng-model 将两个页面连接在一起。我希望通过对两个页面(存储值的位置)使用相同的 Controller ，信息将保存并显示到第二页上，但它被删除了。

我是不是做错了什么？是否有不同的方法来存储这些输入值直到刷新页面？

工厂:

angular.module('BSG').factory('airplaneFactory', function() {
    var name = '';
    var last_name = '';
    var color = '';

    return {
        name: name,
        last_name: last_name,
        color: color
    }
})

飞机 Controller :

angular.module('BSG').controller('AirplaneCtrl', function($scope, airplaneFactory) {
    'use strict';

      $scope.name = airplaneFactory.name;
      $scope.last_name = airplaneFactory.last_name;
      $scope.color = airplaneFactory.color;

});

飞机提示管制员:

angular.module('BSG').controller('AirplanePromptsCtrl', function($scope, airplaneFactory) {
    'use strict';

      $scope.name = airplaneFactory.name;
      $scope.last_name = airplaneFactory.last_name;
      $scope.color = airplaneFactory.color;

});

路由:

    .when('/airplane', {
        templateUrl: 'templates/stories/airplane.html',
        controller: "AirplaneCtrl"
    })
    .when('/airplaneprompts', {
        templateUrl: 'templates/stories/airplane_prompts.html',
        controller: "AirplanePromptsCtrl"
    })

来自plane_prompts.html的片段:

<h2>Who is this story about?</h2>
<p><input type="text" placeholder="name" ng-model="airplane.name"></p>

<h2>What is {{ airplane.name }}'s favorite color?</h2>
<p><input type="text" placeholder="favorite color" ng-model="airplane.color"></p>

来自airplane.html的片段:

Mine was {{ airplane.color }} and had a nametag on it that said {{ airplane.name }}

Answer 1

为每个页面创建一个新 Controller 。创建一个单独的服务来存储值。每个 Controller 都使用此服务来获取/设置值。

查看主页 https://angularjs.org/ 上的示例“连接后端” (向下滚动)项目工厂是您的存储提供商。通过简单的操作将其从远程存储更改为本地存储

var myvalue;