javascript - 重新调用 Controller 时丢失表单输入数据

Question

我有一个简单的多 View Angular 应用程序，它实现了一个向导，因此每次用户单击“下一步”按钮时，应用程序都会导航到下一个 View ，“返回”按钮也是如此。我有一个 $routeProvider 配置，它将所有 View 绑定(bind)到同一个 Controller 。每个 View 代表一个带有输入字段的巨大表单的一部分，$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('');
}]);

问题是每次用户单击“下一步”或“返回”时，都会调用 Controller ，因此在前面的步骤中所做的所有 $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 处于最新状态的最佳方法是什么，所有更改都从应用程序实例的生命周期一开始就进行，并且无需在每次 View 更改时重新实例化它？

Answer 1

使用服务来保存您的表单数据并将其注入(inject)您的 Controller 。

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

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