多个步骤的形式(向导)与UI的路由器?多个、路由器、向导、步骤

2023-09-14 00:18:37 作者:我承认我是个烂痞子i

我想建立一个多步骤的形式(向导)具有角JS。

I'm trying to build a multiple step form (wizard) with angular js.

据我了解,我必须映射每个步骤自己的控制器和视图(模板)。但在我看来,如果我这样做,然后在每个步骤中视图定义的模型将被限制到只有特定控制器的范围。

As I understand, I have to map each step to its own controller and view (template). But it seems to me that if I do it then the model defined in each step view will be limited to the scope of the particular controller only.

因为我想提交填写在表格末尾的所有步骤中的所有数据,我不知道我应该怎么code,以确保模型(S)是在所有步骤共享?

Since I would like to submit all data filled in all steps at the end of the form, I wonder how should I code to make sure the model(s) is shared across all steps?

推荐答案

我会建议你将你的模型公开给每个使用服务\\工厂的步骤。每一步都可以访问由工厂和更新该模型公开的模型。你的工厂会是什么样子的东西。

What i would suggest to you would be to expose your model to each of the steps using a service\factory. Each step can access the model exposed by the factory and updates that model. Your factory would look like something

angular.module("myApp").factory("Wizard",[function() {
     function WizardModel() {
         //Model Properties
         this.title="Test"   
     }
     var wizardService={};
     wizardService.model=new WizardModel();
     wizardService.init=function() {
         //instantiate a new model object wizardService.model={};
     }
     return wizardService;

}])

您现在可以在你的控制器注入此服务。启动向导呼叫之前的init 来重新初始化模型,并使用模式属性来获取当前模型。

You can now inject this service in you controller. Before starting the wizard call init to reinitialize the model and use the model property to get the current model.