點擊離子顯示全屏圖像

Question

我正在使用離子建立一個移動應用程序。創建類似於此的佈局 - > Card Layout

如何在用戶點擊圖像並在再次單擊時恢復正常圖像時在全屏幕上顯示卡片圖像。

普萊舍在下面找到exisitng代碼： 家庭ctrl.js

(function() { 
'use strict'; 

angular.module('testApp').controller('HomeCtrl', ['$scope', 'collegeApi', '$ionicModal', HomeCtrl]); 

function HomeCtrl($scope, collegeApi, $ionicModal) { 
    var vm = this; 

    vm.imgList = [ 
     { 
      name: 'slider2.jpg' 
    }, 
     { 
      name: 'slider3.jpg' 
    }, 
     { 
      name: 'slider4.jpg' 
    }, 
     { 
      name: 'slider5.jpg' 
    }]; 


    $scope.homeEvents = collegeApi.getHomeData(); 
    console.log($scope.homeEvents); 



}; 

}）（）;

home.html的

<ion-view view-title="Home" ng-controller="HomeCtrl as vm"> 
<ion-content> 
    <ion-slide-box> 
     <ion-slide ng-repeat="img in vm.imgList"> 
      <img ng-src="http://lorempixel.com/400/200/" class="full-image"> 
     </ion-slide> 
    </ion-slide-box> 

    <div class="list card back-color" ng-repeat="homeEvent in homeEvents"> 

     <div ng-switch="homeEvent.type"> 
      <div ng-switch-when='star'> 
       <div class="item item-icon-left item-energized"> 
        <i class="icon ion-star light"></i> 
        <h2 class="light font-size-1"> 
      Header</h2> 
       </div> 
      </div> 
      <div ng-switch-when="event"> 
       <div class="item item-icon-left item-calm"> 
        <i class="icon ion-android-calendar light"></i> 
        <h2 class="light font-size-1"> 
      Header</h2> 
       </div> 
      </div> 
      <div ng-switch-when="sport"> 
       <div class="item item-icon-left item-balanced"> 
        <i class="icon ion-android-bicycle light"></i> 
        <h2 class="light font-size-1"> 
      Header</h2> 
       </div> 
      </div> 
      <div ng-switch-default> 
       <div class="item item-icon-left item-dark"> 
        <i class="icon ion-star light"></i> 
        <h2 class="light font-size-1"> 
      Header</h2> 
       </div> 
      </div> 
     </div> 



     <div class="item item-body"> 
      <img class="full-image" src="http://lorempixel.com/400/200/" ng-click="buttonClick('img/conference.jpg')"> 
      <p> 
       <div class="text-justify" data-markdown="{{homeEvent.details}}"></div> 
      </p> 

     </div> 
     <div class="item tabs tabs-secondary tabs-icon-left"> 
      <a class="tab-item" href="#"> 
       <i class="icon ion-share"></i> Share 
      </a> 
     </div> 


    </div> 



</ion-content> 

下面是截圖： Screen shot

Answer 1

按照這些步驟希望如此，這將幫助你

首先使用在你.HTML提供此腳本文件

<script id="modal.html" type="text/ng-template"> 
         <div class="modal" ng-click="closeModal()"> 
         <ion-content> 
         <img src="{{imgUrl}}" style="display:block; width:100%; max-width:600px; margin:auto"/> 
         </ion-content> 
         </div> 
        </script> 

第二次使用在您的控制器

$ionicModal.fromTemplateUrl('modal.html', function (modal) { 
       $scope.gridModal = modal; 
      }, { 
       scope: $scope, 
       animation: 'slide-in-up' 
      }) 
      $scope.openModal = function (data) { 
       $scope.inspectionItem = data; 
       $scope.gridModal.show(); 
      } 
      $scope.closeModal = function() { 
       $scope.gridModal.hide(); 
      } 

在你的CSS文件

.modal .scroll { 
height: 100% !important; 
background-color: black !important; 

display: -webkit-box !important; 
display: -moz-box !important; 
display: -ms-flexbox !important; 
display: -webkit-flex !important; 
display: flex !important; 

-webkit-box-direction: normal !important; 
-moz-box-direction: normal !important; 
-webkit-box-orient: horizontal !important; 
-moz-box-orient: horizontal !important; 
-webkit-flex-direction: row !important; 
-ms-flex-direction: row !important; 
flex-direction: row !important; 


-webkit-box-align: center !important; 
-moz-box-align: center !important; 
-webkit-align-items: center !important; 
-ms-flex-align: center !important; 
align-items: center !important; 

}

編輯

3用途： 只是複製和粘貼代碼到文件，並將imgeURI的參數更改爲您的圖片網址。通過ID modal.html和圖像查看點擊使用

ng-click="openModal(imageUrl)" 

希望Java腳本自動呼叫這將幫助你

Answer 2

得到了解決按APK APPS

下面是更新後的代碼：

我的控制器：

(function() { 
'use strict'; 

angular.module('testApp').controller('HomeCtrl', ['$scope', 'collegeApi', '$ionicModal', HomeCtrl]); 

function HomeCtrl($scope, collegeApi, $ionicModal) { 
    var vm = this; 

    vm.imgList = [ 
     { 
      name: 'slider2.jpg' 
    }, 
     { 
      name: 'slider3.jpg' 
    }, 
     { 
      name: 'slider4.jpg' 
    }, 
     { 
      name: 'slider5.jpg' 
    }]; 


    $scope.homeEvents = [ 
     { 
      type: 'star', 
      name: 'Awesome' 
    }, 
     { 
      type: 'sport', 
      name: 'Rocks' 
    }, 
     { 
      type: 'event', 
      name: 'New event' 
    }, 
     { 
      type: 'other', 
      name: 'Lorem' 
    }]; 


    $ionicModal.fromTemplateUrl('modal.html', function (modal) { 
     $scope.gridModal = modal; 
    }, { 
     scope: $scope, 
     animation: 'slide-in-up' 
    }) 
    $scope.openModal = function (data) { 
     $scope.inspectionItem = data; 
     $scope.gridModal.show(); 
    } 
    $scope.closeModal = function() { 
     $scope.gridModal.hide(); 
    } 

}; 

}）（）;

我的HTML：

<ion-view view-title="Home" ng-controller="HomeCtrl as vm"> 
<ion-content> 
    <ion-slide-box> 
     <ion-slide ng-repeat="img in vm.imgList"> 
      <img ng-src="http://lorempixel.com/400/200/" class="full-image"> 
     </ion-slide> 
    </ion-slide-box> 

    <div class="list card back-color" ng-repeat="homeEvent in homeEvents"> 

     <div ng-switch="homeEvent.type"> 
      <div ng-switch-when='star'> 
       <div class="item item-icon-left item-energized"> 
        <i class="icon ion-star light"></i> 
        <h2 class="light font-size-1"> 
      Header</h2> 
       </div> 
      </div> 
      <div ng-switch-when="event"> 
       <div class="item item-icon-left item-calm"> 
        <i class="icon ion-android-calendar light"></i> 
        <h2 class="light font-size-1"> 
      Header</h2> 
       </div> 
      </div> 
      <div ng-switch-when="sport"> 
       <div class="item item-icon-left item-balanced"> 
        <i class="icon ion-android-bicycle light"></i> 
        <h2 class="light font-size-1"> 
      Header</h2> 
       </div> 
      </div> 
      <div ng-switch-default> 
       <div class="item item-icon-left item-dark"> 
        <i class="icon ion-star light"></i> 
        <h2 class="light font-size-1"> 
      Header</h2> 
       </div> 
      </div> 
     </div> 



     <div class="item item-body"> 
      <img class="full-image" src="http://lorempixel.com/400/200/" ng-click="openModal('http://lorempixel.com/400/200/')"> 
      <p> 
       <div class="text-justify" data-markdown="{{homeEvent.details}}"></div> 
      </p> 

     </div> 
     <div class="item tabs tabs-secondary tabs-icon-left"> 
      <a class="tab-item" href="#"> 
       <i class="icon ion-share"></i> Share 
      </a> 
     </div> 


    </div> 

    <script id="modal.html" type="text/ng-template"> 
     <div class="modal" ng-click="closeModal()"> 
      <ion-content> 
       <img src="http://lorempixel.com/400/200/" style="display:block; width:100%; max-width:600px; margin:auto" /> 
      </ion-content> 
     </div> 
    </script> 

</ion-content> 

我的CSS：

.modal .scroll { 
height: 100% !important; 
background-color: black !important; 
display: -webkit-box !important; 
display: -moz-box !important; 
display: -ms-flexbox !important; 
display: -webkit-flex !important; 
display: flex !important; 
-webkit-box-direction: normal !important; 
-moz-box-direction: normal !important; 
-webkit-box-orient: horizontal !important; 
-moz-box-orient: horizontal !important; 
-webkit-flex-direction: row !important; 
-ms-flex-direction: row !important; 
flex-direction: row !important; 
-webkit-box-align: center !important; 
-moz-box-align: center !important; 
-webkit-align-items: center !important; 
-ms-flex-align: center !important; 
align-items: center !important; 

}