使用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)"你通過一些交流tual id ...

來源

2016-07-21 14:47:05

我正在努力做到上述，但不斷收到GET文件：///android_asset/www/undefined.html net :: ERR_FILE_NOT_FOUND。對於我使用的模式腳本標籤：id =「{{hist.id}} - modal.html」。當我查看html源代碼時，腳本ID標記和showModal（1）參數中的數字都是正確的。所以不知道爲什麼會發生......任何想法？ – condo1234

'''android_asset'''建議你運行一些wrapper/Cordova thingy ...你有沒有試過普通模式 - 它們是否被檢索到？在我的例子中，我把'''html template'''直接放在'''ng-app'''下，這也可能是一個區別。 –

使用Ionic生成動態模態

回答

相關問題