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

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

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

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

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

3 88
angularjs scope routes controllers

3 ответа:

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

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

вот как вы определяете сервис:

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

    });
138

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

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

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

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

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

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

9

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

  1. $rootScope
  2. модель

приведенный ниже пример демонстрирует передачу значений с помощью модели

приложение.js

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

SharedService.js

function SharedService($rootScope){

 return{
    objA: "value1",
    objB: "value2"
  }
}

/ / измените значение в контроллере a

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

надеюсь, что это помогает.

5