use angular-ui-router with bootstrap $modal to create a multi-step wizard

Question

The FAQ for ui-router has a section about integration with bootstrap $modals, but it doesn't mention anything about abstract views. I have 3 views under a single abstract view, so something like the following.

 $stateProvider    .state('setup', {      url: '/setup',      templateUrl: 'initialSetup.html',      controller: 'InitialSetupCtrl',      'abstract': true    })       // markup for the static view is    <div class="wizard">      <div ui-view></div>    </div>      .state('setup.stepOne', {       url: '/stepOne',       controller: 'SetupStepOneCtrl',       onEnter: function($stateParams, $state, $modal) {         $modal.open{           backdrop: 'static',           templateUrl: 'setup.stepOne.html',           controller: 'SetupStepOneCtrl'         })       }       })       .state('setup.stepTwo', {      url: '/stepTwo',      controller: 'SetupStepTwoCtrl',      onEnter: function($stateParams, $state, $modal) {        $modal.open({          backdrop: 'static',          templateUrl: 'setup.stepTwo.html',          controller: 'SetupStepTwoCtrl'        })      }        })        .state('setup.stepThree', {       url: '/stepThree',       templateUrl: 'setup.stepThree.html',       controller: 'SetupStepThreeCtrl'       ...     });  }]); 

I've also tried to only add the onEnter block to the abstract state, and removed onEnter from each of the 3 child states. This actually seems to me like the right approach. The abstract state initializes and opens the $modal and the subsequent states should interpolate into , but when I tried this the ui-view container was empty.

I can think of some other hacky ways to workaround this but thought I'd ask to see if there's a canonical way of handling this.

Answer 1

Alternative way is to use ng-switch with ng-include combination inside $modal controller to dynamically load wizard step templates, that is if you don't mind sharing the same controller for all wizard steps:

<div ng-switch="currentStep.number">   <div ng-switch-when="1">     <ng-include src="'wizardModalStep1.html'"></ng-include>   </div>   <div ng-switch-when="2">     <ng-include src="'wizardModalStep2.html'"></ng-include>   </div>   <div ng-switch-when="3">     <ng-include src="'wizardModalStep3.html'"></ng-include>   </div> </div> 

Here is Plunker with working example: http://plnkr.co/edit/Og2U2fZSc3VECtPdnhS1?p=preview

Hope that helps someone !!

Answer 2

I used following approach to develop a wizard. this might be help for you.

I used states like below sample with parent property.

 var home = {             name: 'home',             url: '/home',             controller: 'MainController',             templateUrl: '/html/main.html'         },         sampleWizard = {             name: 'sampleWizard',             url: '/sampleWizard',             controller: 'sampleWizardController',             templateUrl: '/html/sd/sample/sampleWizard.html'         },          sampleSectionOne = {              name: 'sampleSectionOne',              url: '/sampleSectionOne',              parent: sampleWizard,             controller: 'sampleSectionOneController',             templateUrl: '/html/sd/sample/sampleSectionOne.html'         },         sampleSectionTwo = {             name: 'sampleSectionTwo',             url: '/sampleSectionTwo',             parent: sampleWizard,             controller: 'sampleSectionTwoController',             templateUrl: '/html/sd/sample/sampleSectionTwo.html'         };          $stateProvider.state(home);         $stateProvider.state(sampleWizard);         $stateProvider.state(sampleSectionOne);         $stateProvider.state(sampleSectionTwo);