simple simple - 1 month ago 30
AngularJS Question

Angular ui router - nested view inside modal

I want to put a Steps Wizard into a Modal.

Here is my working Wizard: plunker http://plnkr.co/edit/achnwMtmebR3oc8bq7pp?p=preview

Here is my working modal: http://plnkr.co/edit/ux1Ju6m2s9VqiIPjmH1n?p=preview

How do I add this working wizard to a modal? Can nested states be multiple states or limited to no more than two?

.config(function($stateProvider, $urlRouterProvider) {

$stateProvider

// route to show our basic form (/form)
.state('form', {
url: '/form',
templateUrl: 'form.html',
controller: 'formController'
})

// nested states
// each of these sections will have their own view
// url will be nested (/form/profile)
.state('form.profile', {
url: '/profile',
templateUrl: 'form-profile.html'
})

// url will be /form/interests
.state('form.interests', {
url: '/interests',
templateUrl: 'form-interests.html'
})

// url will be /form/payment
.state('form.payment', {
url: '/payment',
templateUrl: 'form-payment.html'
});

// catch all route
// send users to the form page
$urlRouterProvider.otherwise('/form/profile');
})

Answer

just merge your HTML and JS files, move ui-view inside modal HTML:

<body ng-app="formApp">

  <div ng-controller="MainCtrl as mainCtrl">

    <button type="button" 
            class="btn btn-default"    
            ng-click="mainCtrl.page.open()">Open Modal</button>


    <!-- modal -->
    <script type="text/ng-template" id="myModalContent.html">
      <div class="modal-header">
          <h3 class="modal-title" id="modal-title">I'm a modal!</h3>
      </div>
      <div class="modal-body" id="modal-body">
          <!-- views will be injected here -->
          <div class="container">
              <div ui-view></div>
          </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-default pull-left" 
                type="button" 
                ng-click="modalInstanceCtrl.modal.cancel()">Cancel</button>
      </div>
    </script>

  </div>



  <div class="row">
      <div class="col-sm-8 col-sm-offset-2">
      <div class="jumbotron text-muted text-center">
          <p>a tutorial by <a href="http://scotch.io" target="_blank">scotch.io</a></p>
          <p><a href="http://scotch.io/tutorials/javascript/angularjs-multi-step-form-using-ui-router">Create a Multi-Step Form Using Angular and UI-Router</a></p>
      </div>
      </div>
  </div>

  </body>

plunker: http://plnkr.co/edit/NaTveRiM5OTufouRo2v7?p=preview

Comments