使用AngularJS构建步骤向导的最佳方法

时间:2018-10-06 15:25:27

标签: javascript angularjs wizard

我需要构建一个向导:
5个步骤,每个步骤-不同的形式。
这是描述向导的图片:
steps

我想知道什么是实现此目标的最佳结构。
课程的每一步都有其自己的控制器,指令,模板。 如何在向导和步骤之间进行连接?
(最后,我需要提交从用户那里收到的所有表格数据), 另外-每当用户完成一个步骤时-我们都需要更新步骤模块。

1 个答案:

答案 0 :(得分:0)

因此对于这种情况,有两种可能的解决方案。

1)向导应该是一个控制器,每个步骤都是一个指令。 each指令可以处理每个步骤的逻辑,而不会影响工作流程。

伪指令具有两种方式的数据绑定,就像任何其他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;
   }

});

理想情况下,应该将业务逻辑放在服务或工厂中,以防止代码重复和总体良好实践。

希望这会有所帮助。