Angular ui路由器 - 模态内的嵌套视图答案

【问题标题】：Angular ui router - nested view inside modalAngular ui路由器 - 模态内的嵌套视图
【发布时间】：2016-10-19 02:42:49
【问题描述】：

我想将 Steps Wizard 放入 Modal。

这是我的工作向导：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');
})

【问题讨论】：

标签： angularjs angular-ui-router angular-ui-bootstrap

【解决方案1】：

只需合并您的 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

【讨论】：

【解决方案2】：

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

【讨论】：