ionic $ionicModal使用方法

 

HTML

    <button class="button icon-center ion-images  button-outline button-calm"style="border-color:#12B7F5;color:#12B7F5;" ng-click="showModal1()">
  照片
</button>

 

modal-view

  <ion-modal-view >
        <ion-header-bar class="bar bar-header bar-positive" id="mview">
          <h1 class="title">上傳照片預覽</h1>
          <button class="button button-clear button-primary" ng-click="hideModal1()">關閉</button>
        </ion-header-bar>
        <ion-content class="padding">
          
            
    <div class="list card">

  <div class="item item-avatar">
  <img src="images/logo.jpg" />
    <h2 style="color:#676767;">市北高新</h2>
    <p>案件編號：6107223</p>
  </div>

  <div class="item item-body">
    <img  src="images/bg.png" style="height:250px;width: 100%;">
    <p>
    
      <a class="subdued">時間：2016-11-8 14:53</a>
    </p>
  </div>


</div>
            
        
    
 <button class="button button-block button-positive" style="background-color:#12B7F5;letter-spacing: 10px;margin-top: 30px;">
  刪除
   </button>
            
        
        </ion-content>
 </ion-modal-view>

JS

 //定義開啟彈窗的方法 photo
  $scope.showModal1 = function () {
    if ($scope.modal) {
      $scope.modal.show();      //如果彈窗已經存在，直接顯示
    } else {
      $ionicModal.fromTemplateUrl('templates/ajsb/photo.html', {
        scope: $scope
      }).then(function (modal) {
       $scope.model=modal;
      $scope.model.show();
      });
    }
   
  };
  $scope.hideModal1 = function () {
    $scope.model.hide();
  };
  //當前視圖被銷毀后，同時從內容中移除彈窗
  $scope.$on('$destroy', function() {
    $scope.modal.remove();
  });

 

 引入 $ionicModal