87

我有一个表格跨越几页的情况（可能不理想，但就是这样）。我想为整个表单设置一个范围，随着您的进行而填写，这样如果用户在步骤之间来回切换，就很容易记住状态。

所以我需要用非常伪代码做：

  1. 放$scope.val = <Some dynamic data>
  2. 单击一个链接并被路由到一个新模板（可能使用相同的控制器）。
  3. $scope.val仍应与最后一页上的值相同。

以某种方式为范围持久化数据是解决此问题的正确方法，还是有其他方法？您甚至可以创建一个在路由之间具有持久范围的控制器，当然除了将其保存在数据库中。

4

3 回答 3

138

您需要使用服务，因为服务将在您的应用程序的整个生命周期中持续存在。

假设您要保存与用户有关的数据

这是您定义服务的方式：

app.factory("user",function(){
        return {};
});

在您的第一个控制器中：

app.controller( "RegistrationPage1Controller",function($scope,user){
    $scope.user = user;
    // and then set values on the object
    $scope.user.firstname = "John";
    $scope.user.secondname = "Smith";
});

app.controller( "RegistrationSecondPageController",function($scope,user){
        $scope.user = user;
        // and then set values on the object
        $scope.user.address = "1, Mars";

    });
于 2012-12-14T16:15:34.040 回答
9

该服务将起作用，但仅使用普通作用域和控制器的一种合乎逻辑的方法是设置您的控制器和元素，以便它反映您的模型的结构。特别是，您需要建立父范围的父元素和控制器。表单的各个页面应该驻留在父视图的子视图中。即使子视图更新，父范围仍然存在。

我假设您使用的是ui-router，因此您可以嵌套命名视图。然后在伪代码中：

<div ng-controller="WizardController">
  <div name="stepView" ui-view/>
</div>

然后 WizardController 定义您希望在多页表单（我将其称为“向导”）的步骤中保留的范围变量。然后您的路线将stepView仅更新。每个步骤都可以有自己的模板、控制器和范围，但它们的范围在页面之间会丢失。但是 WizardController 中的范围在所有页面中都保留。

要从子控制器更新 WizardController 范围，您需要使用类似于 WizardController 的语法$scope.$parent.myProp = 'value'或为每个范围变量定义一个函数setMyProp。否则，如果您尝试直接从子控制器设置父范围变量，您最终只会在子控制器本身上创建一个新的范围变量，从而隐藏父变量。

有点难以解释，我为缺乏完整的例子而道歉。基本上，您需要一个父控制器来建立父范围，该范围将保留在表单的所有页面中。

于 2014-06-04T22:37:45.420 回答
6

数据可以通过两种方式在控制器之间传递

  1. $rootScope
  2. 模型

下面的示例演示了使用模型传递值

应用程序.js

angular.module('testApp')
  .controller('Controller', Controller)
  .controller('ControllerTwo', ControllerTwo)
  .factory('SharedService', SharedService);

SharedService.js

function SharedService($rootScope){

 return{
    objA: "value1",
    objB: "value2"
  }
}

//修改控制器A中的值

控制器.js

function Controller($scope, SharedService){

 $scope.SharedService = SharedService;

 $scope.SharedService.objA = "value1 modified";
}

//访问controllertwo中的值

ControllerTwo.js

function ControllerTwo($scope, SharedService){

 $scope.SharedService = SharedService;

 console.log("$scope.SharedService.objA"+$scope.SharedService.objA); // Prints "value1 modified"
}

希望这可以帮助。

于 2016-05-09T03:06:20.690 回答