zoukankan      html  css  js  c++  java
  • 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; 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

  • 相关阅读:
    PAT甲级——A1059 Prime Factors
    PAT甲级——A1058 A+B in Hogwarts
    PAT甲级——A1057 Stack
    hdu2665 主席树模板题
    存两个图论模板
    存两个图论模板
    存两个图论模板
    codevs1080 第一次用ZKW线段树
    codevs1080 第一次用ZKW线段树
    codevs1080 第一次用ZKW线段树
  • 原文地址:https://www.cnblogs.com/zry2510/p/6087889.html
Copyright © 2011-2022 走看看