model not propagating between wzsteps

[ghost]

in the following code fragment....

      <wz-step title="Start">
        <h2>General Information</h2>
        Group Name:<input ng-model="groupName" type="text"/>
        <br>
        <br>
        <input type="submit" wz-next value="Continue..."/>
      </wz-step>
      <wz-step title="2" >
        <h2>Define your Group Structure for {{groupName}}</h2>
        <input type="submit" wz-next value="Continue..."/>
      </wz-step>

the model item groupName isn't available in the 2nd wzStep. I was expecting it to be populated with what was typed in the first step of the wizard. Any ideas?

[prem-prakash]

Same problem here. It seems that each step creates one different scope.

[prem-prakash]

Maybe it is because of the use of ng-repeat at this line https://github.com/mgonto/angular-wizard/blob/master/src/wizard.html#L4 , I am doing some digging here to find out...

[prem-prakash]

I am using ui-router

[cspinetta]

As @prem-prakash said, each step creates one different scope. You can create the model in a parent scope of the steps, and gain access from each of the steps. I also needed to use a model at all steps and in my particular use case I created the model on the controller of the view that contain the wizard, then I could use it from each of the steps.

[prem-prakash]

Hi @cristianspinetta
If it is not asking too much, could you give a simple example of how you did this?
I believe it is important to add an example like this to README.md.

[ghost]

agreed. I'm new to angular and the whole scope thing has me quite confused. A simple example would go a long way here.

[cspinetta]

yes, of course!

If you need to have the model on a controller that wraps the wizard (it was my case): http://plnkr.co/edit/jYwwkUMc5IMUkR4zgB7P?p=preview

Or maybe you want to manage the model only from the view: http://plnkr.co/edit/Nze2VbS31TyC3ZWdXWy0?p=preview

For know more about the scopes, you can read this answer from stackoverflow: http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs#14049482

[ghost]

Thanks so much. That's an excellent example and demonstrates clearly how to share the model between steps. Thanks for taking the time to post this.

[Igosuki]

If you look at the source code of the step directive, you'll see it defines a scope, which automatically becomes a childscope, what you must do is not replace the reference of the parent scope value in the child scope, and Angular will navigate the scope tree to find it.
However, it is better to use a service to share data between directives than a parent controller, if you need generic behavior just pass the name of the provider in the attributes and get it manually through $injector.get

[cspinetta]

@Igosuki maybe I'm not understanding well, you said that it's not necessary to reference the parent scope to create the model? could you make an example on plunker?

[mgonto]

@cristianspinetta +1. A plunkr example would be awesome

[leeopencare]

Use a object, when you use a regular variable it will use the scope local to the step. If you use

$scope.selected = {
  groupName: '...'
}

and refer to it via data-ng-model="selected.groupName" it will work.

[Igosuki]

Coming too late but, your problem is related to the basics of : if I replace the value of an object completely in Javascript, then I am changing its reference.
http://jsfiddle.net/w0boyfw7/2/

[jacobscarter]

closing due to inactivity, I will reopen if people still have questions