Angularjs,在路线之间传递范围

Question

我有一种形式可以延伸几页(可能不太理想,但就是这样).我希望在整个表单中有一个范围可以随着时间的推移填充,这样如果用户在步骤之间来回切换,则很容易记住状态.

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

1. 组 $scope.val = <Some dynamic data>
2. 单击链接并路由到新模板(可能使用相同的控制器).
3. $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'或setMyProp在WizardController上为每个范围变量定义一个函数.否则,如果您尝试直接从子控制器设置父作用域变量,您最终只会在子项本身上创建一个新的作用域变量,从而隐藏父变量.

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

Answer 3

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

1. $rootScope
2. 模型

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

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

希望这可以帮助.