scope - otherwise - Angularjs, pasando alcance entre rutas

otherwise angularjs

Question

Tengo una situación con un formulario que se extiende por varias páginas (puede que no sea ideal, pero así es como es). Me gustaría tener un alcance para todo el formulario que se completa a medida que avanza, de modo que si el usuario va y viene entre los pasos, es fácil recordar el estado.

Así que tengo que hacer, en muy pseudo-código:

1. Establecer $scope.val = <Some dynamic data>
2. Haga clic en un enlace y enrute a una nueva plantilla (probablemente con el mismo controlador).
3. $scope.val aún debe tener el mismo valor que en la última página.

De alguna manera, los datos persistentes para el alcance son la forma correcta de hacerlo, ¿o hay alguna otra manera? ¿Puedes incluso crear un controlador que tenga un alcance persistente entre las rutas, excepto para guardarlo en una base de datos, por supuesto.

Answer 1

El servicio funcionará, pero una forma lógica de hacerlo utilizando únicamente ámbitos y controladores comunes es configurar sus controladores y elementos para que reflejen la estructura de su modelo. En particular, necesita un elemento primario y un controlador que establezcan un alcance principal. Las páginas individuales del formulario deben residir en una vista que sea secundaria para el padre. El ámbito principal persiste incluso cuando se actualiza la vista secundaria.

Supongo que estás usando el enrutador ui para poder anidar vistas con nombre. Luego en pseudo-código:

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

Entonces WizardController define las variables de ámbito que desea conservar en los pasos del formulario de varias páginas (al que me refiero como un "asistente"). Entonces tus rutas actualizarán stepView solamente. Cada paso puede tener sus propias plantillas, controladores y ámbitos, pero sus ámbitos se pierden de página a página. Pero los ámbitos en WizardController se conservan en todas las páginas.

Para actualizar los ámbitos de WizardController desde los controladores secundarios, deberá usar sintaxis como $scope.$parent.myProp = ''value'' o definir una función setMyProp en WizardController para cada variable de ámbito. De lo contrario, si intenta establecer las variables de ámbito principal directamente desde los controladores secundarios, terminará creando una nueva variable de ámbito en el elemento secundario, sombreando la variable principal.

Es un poco difícil de explicar y me disculpo por la falta de un ejemplo completo. Básicamente, desea un controlador principal que establezca un ámbito principal, que se conservará en todas las páginas de su formulario.

Answer 2

Los datos se pueden pasar entre los controladores a través de dos maneras

1. $rootScope
2. Modelo

El ejemplo siguiente muestra el paso de valores utilizando el modelo

app.js

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

SharedService.js

function SharedService($rootScope){
return{
objA: "value1",
objB: "value2"
}
}

// Modificar el valor en el controlador A

Controller.js

function Controller($scope, SharedService){
$scope.SharedService = SharedService;
$scope.SharedService.objA = "value1 modified";
}

// Acceda al valor en controllertwo

ControllerTwo.js

function ControllerTwo($scope, SharedService){
$scope.SharedService = SharedService;
console.log("$scope.SharedService.objA"+$scope.SharedService.objA); // Prints "value1 modified"
}

Espero que esto ayude.

Answer 3

Necesita usar un servicio ya que un servicio persistirá a lo largo de la vida de su aplicación.

Supongamos que quiere guardar datos pertenecientes a un usuario

Así es como defines el servicio:

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

En tu primer controlador:

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