AngularJS，路由之间传递范围

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'或setMyProp在WizardController上定义一个函数。否则，如果尝试直接从子控制器设置父作用域变量，则最终只会在子项本身上创建一个新的作用域变量，从而遮盖了父变量。

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

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"

}