Angularjs, проходящий между маршрутами

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

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

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

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

Ответ 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";

    });

Ответ 2

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

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

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

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

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

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

Ответ 3

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

$rootScope
Model

В приведенном ниже примере демонстрируется передача значений с использованием модели

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

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