重新调用控制器时丢失表单输入数据

Question

我有一个实现向导的简单多视图Angular应用程序,因此每次用户单击"下一步"按钮时,应用程序将导航到下一个视图,"后退"按钮也相同.我有一个$routeProvider配置将所有视图绑定到同一个控制器.每个视图代表一个包含输入字段的巨大表单块,并$routeProvider管理它们之间的导航:

app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    $routeProvider.when('/salespoints', {
        templateUrl: 'salespoints',
        controller: 'main'
    })
    .when('/users', {
        templateUrl: 'users',
        controller: 'main'
    })
    .otherwise({
        templateUrl: 'partner',
        controller: 'main'
    });

    $locationProvider.hashPrefix('');
}]);

问题是,每次用户单击"下一步"或"返回"时,都会调用控制器,因此$scope以前步骤所做的所有更改都会丢失:

app.controller('main', ['$scope', function ($scope) {
    console.log('controller invoked'); // appears each time a user presses "Next" or "Back", hence re-instantiation of $scope
}]);

应用程序足够小$rootScope,以防万一其他方法失败,但我只想避免这种情况作为反模式.

保持$scope最新状态的最佳方法是什么,从应用程序实例的生命周期的一开始就进行所有更改,而不是在每次更改视图时重新实例化？

Answer 1

使用服务保存表单数据并将其注入控制器.

angular.module('app').factory('formService', function () {
   var data = {};
   return {
      data: data
   };
});

angular.module('app').controller('ctrl', function(formService) {
   this.formData = formService.data;
});