Question

我正在尝试设置我的Angular应用程序以在一个页面上获取输入，然后在第二页上显示它。我正在使用ng-model将两个页面绑在一起。我希望通过对两者（存储值）页面使用相同的控制器，信息将保存并显示在第二页上，但它被删除。

我有什么问题吗？在页面刷新之前，是否有不同的方法来存储这些输入值？

工厂：

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

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

飞机控制器：

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

来自airplane_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的

Snippet：

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

Answer 1

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

查看主页https://angularjs.org/上的“连接后端”示例（向下滚动） Projects-factory是您的存储提供商。使用简单的

将其从远程存储更改为本地存储

var myvalue;

Answer 2

$ scope.airplane应该作为服务创建，然后您可以通过将服务作为参数插入到两个控制器来使用依赖注入。

angular.module('BSG').factory('airplaneFactory', function() {
    return {
        name: 'name',
        last_name: 'last_name',
        color: 'color'
    }
})

Angular - 在一个页面上获取输入并在具有相同控制器的第二页上显示值

2 个答案: