각도 UI 라우터 - 모달 내 중첩 된보기

단계 마법사를 모달에 넣으 려합니다. 여기 http://plnkr.co/edit/achnwMtmebR3oc8bq7pp?p=preview 각도 UI 라우터 - 모달 내 중첩 된보기

내 작업 모달 plunker : http://plnkr.co/edit/ux1Ju6m2s9VqiIPjmH1n?p=preview

은 어떻게 모달이 작업 마법사를 추가하려면 다음

내 작업 마법사인가? 중첩 된 상태가 여러 상태 또는 2 개 이하로 제한 될 수 있습니까?

.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과 JS 파일을 병합 모달 HTML 내부에 ui-view 이동 :

<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 라우터 - 모달 내 중첩 된보기

답변

관련 문제