Angularjs, передача области между маршрутами

У меня ситуация с формой, которая растягивается на несколько страниц (может быть, не идеальна, но так оно и есть). Я хотел бы иметь одну область видимости для всей формы, которая заполняется по мере продвижения, чтобы, если пользователь переходит между шагами, легко запомнить состояние.

Так что мне нужно сделать очень псевдокодом:

1. Задавать $scope.val = <Some dynamic data>
2. Щелкните ссылку, чтобы перейти к новому шаблону (возможно, с тем же контроллером).
3. $scope.val все равно должно быть то же значение, что и на последней странице.

Является ли сохранение данных для области правильным способом решения этой проблемы или есть другой способ? Можете ли вы даже создать контроллер, который имеет постоянную область видимости между маршрутами, за исключением, конечно, сохранения его в базе данных.

Вам необходимо использовать службу, поскольку она будет существовать на протяжении всего жизненного цикла вашего приложения.

Допустим, вы хотите сохранить данные, относящиеся к пользователю.

Вот как вы определяете услугу:

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

    });

Сервис будет работать, но логичный способ сделать это с использованием только обычных областей видимости и контроллеров - настроить контроллеры и элементы таким образом, чтобы они отражали структуру вашей модели. В частности, вам нужны родительский элемент и контроллер, которые устанавливают родительскую область. Отдельные страницы формы должны находиться в представлении, которое является дочерним по отношению к родительскому. Родительская область сохраняется даже при обновлении дочернего представления.

Я предполагаю, что вы используете ui-router, чтобы иметь вложенные именованные представления. Затем в псевдокоде:

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

Затем WizardController определяет переменные области видимости, которые вы хотите сохранить на всех этапах многостраничной формы (которую я называю «мастером»). Тогда будут обновляться stepViewтолько ваши маршруты . Каждый шаг может иметь свои собственные шаблоны, контроллеры и области действия, но их области действия теряются от страницы к странице. Но области в WizardController сохраняются на всех страницах.

Чтобы обновить области WizardController из дочерних контроллеров, вам нужно будет использовать синтаксис, например, $scope.$parent.myProp = 'value'или определить функцию setMyPropв WizardController для каждой переменной области. В противном случае, если вы попытаетесь установить переменные родительской области видимости непосредственно из дочерних контроллеров, вы в конечном итоге просто создадите новую переменную области видимости для самого дочернего элемента, затеняя родительскую переменную.

Сложно объяснить, и я прошу прощения за отсутствие полного примера. По сути, вам нужен родительский контроллер, который устанавливает родительскую область, которая будет сохраняться на всех страницах вашей формы.

Данные могут передаваться между контроллерами двумя способами.

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.js

function ControllerTwo($scope, SharedService){

 $scope.SharedService = SharedService;

 console.log("$scope.SharedService.objA"+$scope.SharedService.objA); // Prints "value1 modified"
}

Надеюсь это поможет.