arielfaur / ionic-wizard Goto Github PK
View Code? Open in Web Editor NEWA set of angular directives to create a wizard using Ionic's slide box
Home Page: http://arielfaur.github.io/ionic-wizard
License: MIT License
A set of angular directives to create a wizard using Ionic's slide box
Home Page: http://arielfaur.github.io/ionic-wizard
License: MIT License
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
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.
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?
no description needed
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.
$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
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>
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
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:
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)">
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.
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?
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.
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
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.