Question

我正在使用Ionic构建移动应用程序。创建了类似于此的布局 - ＆gt; 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);



};

}）（）;

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文件中使用第3次

.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。标识为modal.html的java脚本自动调用和图像视图单击使用

ng-click="openModal(imageUrl)"

希望这会对你有所帮助

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

离子显示全屏图像点击

2 个答案: