Hi @arielfaur,
Found a strange UI issue where pressing tabs while filling out a form breaks the slidebox.

I am able to reproduce this on your demo plunkr
http://plnkr.co/edit/V3AiSnB4WYIXmCbNkBvn?p=preview

Steps:

1. Click on next to go to second screen
2. Focus on 'Type something' input box to type something.
3. Tab on keyboard.

Firstly, thanks for providing this nifty way of working with ionic slide box. Great plugin to have.

I am conditionally rendering ion-wizard-step using following

      <ion-slide ion-wizard-step ng-if="options.something"  next-condition="options.something_else">
      </ion-slide>

using ng-if on ion-slide works well when its false. When its true, it messes up the next-condition (button is disabled even when condition is true). Using ng-if on a parent tag like <div> renders a blank slide. Using ng-show works correctly when its true but things fall apart when it is false.

Is there an appropriate way to conditionally render an ion-slide ion-wizard-step ?

As an alternative, It can be also helpful to have ion-wizard-skip-step that would skip the step when doing next/prev over looking next/prev conditions.

Thanks

Hi,

this is not a bug and i need to know can i following case using ionic-wizard.

I have to submit values to controller in each step. any idea how to achieve this. also i created new controllers for every step.

It would be nice if we could disable the ion-wizard-next button when the condition for the next step resolves to false.

This could either be the default behavior, or the wizard could add a, say, $wizardNextCondition property to the scope which could be then used in the template like so:

<ion-nav-buttons side="right">
    <button class="button button-stable no-animation" ion-wizard-next
        ng-disabled="!$wizardNextCondition">Next</button>
    <button class="button button-stable no-animation" ion-wizard-start="done()">OK</button>
</ion-nav-buttons>

The issue is with ion-wizard-previous, ion-wizard-previous directives.

Heres whats happaning:
ionic.bundle.js (line 54515 - ionic 1.01):

$scope.$parent.$broadcast('slideBox.slideChanged', slideIndex);

is getting fired;
But the watcher for the event:

scope.$on("slideBox.slideChanged", function(e, index) {

isn't getting fired.

i solved it in the meanwhile until i'll have an understanding on what goes wrong here.
Here's how I solved it:

app.controller('myCtrl', ['$scope',
    function($scope) {
      var vm = this;
      // fix to prev next buttons
      var last_slide = 0;
      vm.slideHasChanged = function(index){
        var length = $('ion-slide').length;

        if (index == 0 || last_slide==0) {
          $('[ion-wizard-previous]').toggleClass('ng-hide');
        }
        if (index == length-1 || (index == length-2 && last_slide==length-1)){
          $('[ion-wizard-next]').toggleClass('ng-hide');
        }
        last_slide = index;
      };

and by adding the attribute to my ion-slide-box element like so

<ion-slide-box ion-wizard on-slide-changed="vm.slideHasChanged($index)">

Could your plugin suitable for my concept below?

These wizard bar using for report page generated from server

Hi,

First of all, great solution for common business need.

In my use case, the user may need to revisit the wizard after moving to main application.

I tried doing following , but the wizard opens at last slide instead of first slide.

1. In the "playlists.html", inserted one button, labelled "Restart Wizard", & added ng-click attribute with new method as "ShowWiz()".
2. In the "PlaylistsCtrl", added the new method as below

$scope.ShowWiz = function() {
$state.go('wizard.intro');
};
3. This shows the last slide of wizard.

Please visit "http://plnkr.co/edit/pyQvKesSDVcuODOSSRLV?p=preview" link for demo.

I also need to pass captured values during wizard to main application. Is it possible without using $rootScope object.

May be I am missing something.

Thanks in advance.

Ganesh Gaikwad

I'm using this component for app inside Facebook. what i want when click tab in FB page want load my ionic site inside FB. All other component are working fine but wizard not loading because this error Error: [$compile:ctreq] Controller 'ionNavBar', required by directive 'ionNavButtons', can't be found! but when i load app using browser its working fine.

anyone can help really appreciate

no description needed

Hi,

the problem here is that if you have a long content inside a ion-slide ion-wizard element it doesn't scroll. If you add a ion-scroll tag, the conditional steps get lost.
I'll appreciate any hints about it.
Thanks.

It'd be nice if there was a start-condition that had to be fulfilled for the ionWizardStart similar to the next/previous conditions

I might do a pull request for this sometime this weekend if I have time

If I set next-condition for the first slide (a variable has to be not null to go forward) the Next button is still active and works. So I tap it, I go to the next slide and then I go back: now the button becomes disabled.
For your knowledge, the wizard is the first view I have opening the app.

Ionic team has introduced new slidebox directive under 1.2+.
http://blog.ionic.io/announcing-ionic-1-2/

With this update, they have changed the way we use slidebox component.
http://ionicframework.com/docs/v2/components/#slides

Any plans to update ionic-wizard to support this?

Hi Arielfaur,
I try your wizard preview and I find a bug that you can see on image.
Steps:

1. Mouse click on page 1 and move to page 2
2. Mouse click on page 2 and move to page 1 but slowly to look half of page 1 and leave mouse click.

Thanks for your contribute.
Luca Jonathan Panetta

im trying to validate some fields in step1 before go to step2. So im using next-condition for this but it's not trigger on step1 and it's working fine on step2.

i used this plnkr example http://embed.plnkr.co/azYKSAYOMv0pZu8YEWVs for my project.

Sometimes steps may emerge multiple results and each result may have another next step. So it will be very good to control the steps programatically like a command 'goToStep(2)' etc.

Sorry to bug you again but I am unable to render slides using ng-repeat. the next and prev functionality breaks and both states are disabled after the first step. Check this plunkr
http://plnkr.co/edit/nZirAKqjWgZB2EDiwxR1?p=preview

The error is thrown on:

            scope.$on("wizard:Next", function() {
                scope.swiper.slideNext(true);
            });

I copied over the sample wizard from here: https://plnkr.co/edit/azYKSAYOMv0pZu8YEWVs and I get the "Cannot read property 'slideNext' of undefined" whenever I hit next in the wizard. ionic.wizard is added as a dependency into the app and ion-wizard.js is loaded. Any idea what's going wrong?