Лучший способ построить мастер шагов с AngularJS

Question

Мне нужно построить мастера:
5 шагов, на каждом шаге - разные формы.
Вот изображение, которое описывает мастера:
шагов

Мне интересно, какова лучшая структура для реализации этого.
Каждый шаг конечно имеет свой собственный контроллер, директиву, шаблон.Как я могу соединиться между Мастером и Шагами?
(В конце мне нужно отправить все данные формы, которые я получил от пользователя), Кроме того - всякий раз, когда пользователь заканчивает шаг - нам нужно обновить шагимодуль.

Answer 1

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

1) Мастер должен быть контроллером, причем каждый шаг был бы директивой.Каждая директива может обрабатывать логику для каждого шага, не влияя на рабочий процесс.

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

Контроллер <- привязка данных -> Директива

Преимущество состоит в том, что все разбито на модули и вы можете обрабатыватьэто как составная форма.

Недостатком является то, что он будет управлять обновлениями для нескольких файлов.

2) Вторым решением будет перенести бизнес-логику для каждого шага в службу.Контролеру нужно будет только позвонить в службу для проверки и обновления формы, когда это необходимо.

app.service('WizardService', function(){
   this.step1= function(a,b) {
      //logic here
      return false;
   }
   this.step2= function(a,b) {
      //logic here
      return false;
   }
   this.whatsNextStep= function() {
      //logic here
      return stepN;
   }

});

В идеале вместе с вами следует внедрить свою бизнес-логику в службу или фабрику, чтобы предотвратить дублирование кода и общую полезную практику.

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