Angularjs, passando alcance entre rotas

Eu tenho uma situação com um formulário que se estende por várias páginas (pode não ser o ideal, mas é assim que é). Eu gostaria de ter um escopo para o formulário inteiro que é preenchido à medida que você avança, de modo que, se o usuário for para frente e para trás entre as etapas, é fácil lembrar o estado.

Então eu preciso fazer, em muito pseudo-código:

  1. Set $scope.val =
  2. Clique em um link e seja roteado para um novo modelo (provavelmente com o mesmo controlador).
  3. $scope.val ainda deve ter o mesmo valor da última página.

De alguma forma, os dados persistentes para o escopo são o caminho certo para isso, ou existe alguma outra maneira? Você pode até mesmo criar um controlador que tenha um escopo persistente entre as rotas, exceto por salvá-lo em um database, é claro.

Você precisa usar um serviço, pois um serviço persistirá durante a vida útil do seu aplicativo.

Vamos dizer que você deseja salvar dados pertencentes a um usuário

É assim que você define o serviço:

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

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

O serviço funcionará, mas uma maneira lógica de fazer isso usando apenas escopos e controladores comuns é configurar seus controladores e elementos para que ele reflita a estrutura do seu modelo. Em particular, você precisa de um elemento pai e um controlador que estabeleça um escopo pai. As páginas individuais do formulário devem residir em uma exibição que é um filho para o pai. O escopo pai persiste mesmo quando a exibição filho é atualizada.

Eu suponho que você esteja usando o roteador-ui para que você possa ter exibições nomeadas aninhadas. Então no pseudo-código:

 

Em seguida, o WizardController define as variables ​​de escopo que você deseja preservar nas etapas do formulário de várias páginas (ao qual estou me referindo como um “assistente”). Então suas rotas atualizarão somente o stepView . Cada etapa pode ter seus próprios modelos, controladores e escopos, mas seus escopos são perdidos de uma página para outra. Mas os escopos no WizardController são preservados em todas as páginas.

Para atualizar os escopos WizardController dos controllers filhos, você precisará usar a syntax como $scope.$parent.myProp = 'value' ou definir uma function setMyProp em WizardController para cada variável de escopo. Caso contrário, se você tentar definir as variables ​​de escopo pai diretamente dos controladores filhos, acabará criando apenas uma nova variável de escopo no próprio filho, sombreando a variável pai.

Meio difícil de explicar e peço desculpas pela falta de um exemplo completo. Basicamente, você quer um controlador pai que estabeleça um escopo pai, que será preservado em todas as páginas do formulário.

Os dados podem ser passados ​​entre os controladores através de duas maneiras

  1. $rootScope
  2. Modelo

A amostra abaixo demonstra a passagem de valores usando o 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" } } 

// Modifique o valor no controlador A

Controller.js

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

// Acesse o valor em controllertwo

ControllerTwo.js

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

Espero que isto ajude.