Ionic을 사용하여 동적 모달 생성

Ionic을 사용하여 동적 모달을 생성하고 고유 모달에 연결된 ng-repeat 항목의 ID가 동적으로있는 컨트롤러를 만들었습니다. 모달은 이온 항목 아래 아래Ionic을 사용하여 동적 모달 생성

컨트롤러

$scope.showModal = function(id){ 

    $ionicModal.fromTemplateUrl(id+'-modal.html', { 
      scope: $scope, 
      animation: 'slide-in-up' 
      }).then(function(modal) { 
      $scope.modal = modal; 
      });  

    window.modal.show(); 

    $scope.openModal = function() { 
     $scope.modal.show(); 
     }; 
     $scope.closeModal = function() { 
     $scope.modal.hide(); 
     };   
}

보기

< ion-item collection-repeat="hist in history" ng-show="history.length" style="background:none;border:none"> 

<div class="list card" ng-click="showModal(id)"> 

        <div class="item "> 
         <div class="row" > 
          <div class="col col-25" > <span style="float:left;padding-top:0.4em"><i class="ion-clock largericon"></i></span> </div> 

          <div class="col col-75" align="left"> 
          <div style="float:left"> 
           <div style="font-size:2em">{{hist.session_time}} </div> 
           <div style="color:#999"> {{hist.human_date}}</div> 
          </div> 
          </div> 

         </div> 
        </div> 
</div> 

     <script id="1-modal.html" type="text/ng-template"> 
     <ion-modal-view style="background:#24112B"> 
     <ion-header-bar class="bar bar-header bar-royal"> 
      <h1 class="title">Session Started... </h1> 
      <button class="button button-clear button-primary" ng-click="modal.hide()"><i class="ion-close-round"></i></button> 
     </ion-header-bar> 
     <ion-content class="padding"> 

     <div style="padding-top:1.3em;padding-bottom:1.3em"> 
      <div class="row" align="center" > 
       <div class="col col-100" align="center">Start by keeping your repetitions to the beat...</div> 
      </div> 


     </div> 

     </ion-content> 
     </ion-modal-view> 
    </script> 
</ion-item>

출처

2016-07-21 condo1234

이 작업 방법을 참조하십시오 : https://plnkr.co/edit/UcoU4i?p=preview

$scope.showModal = function(id){ 
    $ionicModal.fromTemplateUrl(id+'-modal.html', { 
     scope: $scope, 
     animation: 'slide-in-up' 
    }).then(function(modal) { 
     $scope.modal = modal; 
     $scope.modal.show(); // show modal after it was loaded 
    });   
}

편집 : 또한 확인 ng-click="showModal(id)" 당신은 몇 가지 AC를 전달합니다. tual id ...

출처

2016-07-21 14:47:05

위와 같은 작업을 시도했지만 GET 파일을 계속 가져 왔습니다. ///android_asset/www/undefined.html net :: ERR_FILE_NOT_FOUND. modal 스크립트 태그의 경우 : id = "{{hist.id}} - modal.html"을 사용합니다. html 소스를 보면 스크립트 ID 태그와 showModal (1) 매개 변수 모두에서 숫자가 정확합니다. 왜 이런 일이 일어날 지 확신하지 못해요 ... 어떤 생각? – condo1234

'''android_asset'''은 당신이 wrapper/Cordova를 실행한다고 제안합니다 ... 정규 모달을 시도 했습니까? 나의 예제에서는'''ng-app''' 바로 아래에'''html template''을 놓았습니다. –

Ionic을 사용하여 동적 모달 생성

답변

관련 문제