角uiルータ - モダール内のネストされたビュー

私はステップウィザードをモーダルに入れたいと思います。ここで角uiルータ - モダール内のネストされたビュー

私の作業ウィザードである：ここで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'); 
})

出典

2016-10-18 simple

だけモーダル HTML内ui-viewを移動し、あなたのHTMLとJSファイルをマージ：

<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

出典

2016-10-18 18:42:49 Andriy

モーダル内にルーティングを配置しない方がよいでしょう。自分のフォームステップを書く方がよいでしょう。論理は簡単です。別々のルートは必要ありません。「次へ」ボタンを押すと、pageNumberが増えます。各ページに異なるdivを置くことができます。 ng-showまたはng-hideディレクティブを使用してページを非表示にすることができます。

出典

2016-10-18 18:35:58 yogurt

角uiルータ - モダール内のネストされたビュー

答えて

関連する問題