Question

我的情况是表格延伸了几页（可能不太理想，但就是这样）。我希望在整个表单中有一个范围可以随着时间的推移填充，这样如果用户在步骤之间来回切换，则很容易记住状态。

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

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

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

Answer 1

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

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

这是您定义服务的方式：

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";

    });

Answer 2

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

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

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

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

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

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

Answer 3

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

$rootScope
模型

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

<强> app.js

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

<强> SharedService.js

function SharedService($rootScope){

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

//修改控制器A中的值

<强> Controller.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"
}

希望这有帮助。

Angularjs，在路线之间传递范围

3 个答案: