点击离子显示全屏图像

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; 

}