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
Данные могут передаваться между контроллерами двумя способами.
В приведенном ниже примере демонстрируется передача значений с использованием модели
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"
}
Надеюсь, что это поможет.