Question

我想将步骤向导放入模态中。

这是我的工作向导：plunker http://plnkr.co/edit/achnwMtmebR3oc8bq7pp?p=preview

这是我的工作模式：http://plnkr.co/edit/ux1Ju6m2s9VqiIPjmH1n?p=preview

如何将此工作向导添加到模态？嵌套状态可以是多个状态还是限制为不超过两个？

.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 1

最好不要在你的模态中放置路由。您最好编写自己的表单步骤。逻辑很简单。您不需要单独的路线。按下“下一步”按钮后，您将增加pageNumber。您可以为每个页面添加不同的div。您可以使用ng-show或ng-hide指令隐藏/显示页面。

Answer 2

只需合并HTML和JS文件，在模态中移动ui-view 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

Angular ui router - 模态内的嵌套视图

2 个答案: