javascript - 单击时 ionic 显示全屏图像

Question

我正在使用 Ionic 构建移动应用程序。创建了一个类似于此的布局 --> Card Layout

如何在用户点击图片时全屏显示卡片图片，再次点击时恢复正常。

请在下面找到现有的代码:主页-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);



};

})();

主页.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>

在你的 Controller 中第二次使用

$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;
}

已编辑:只需将代码复制并粘贴到文件中，并将 imgeURI 的参数更改为您的图像 URL。 java脚本通过id自动调用modal.html并在图片View上点击使用

ng-click="openModal(imageUrl)"