点击离子显示全屏图像
我正在使用离子建立一个移动应用程序。创建类似于此的布局 - > 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
按照这些步骤希望如此,这将帮助你
首先使用在你.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脚本自动呼叫这将帮助你
嗨,感谢您的帮助。补充了上面的代码,但是如何从图像点击调用模态。 –
只需将代码复制并粘贴到文件中,并将imgeURI的参数更改为图像URL。 java脚本自动调用id'modal.html'和图片查看点击使用'ng-click =“openModal(imageUrl)”' –
非常感谢:-)。有用。我也找到一个提供类似解决方案的链接[Code Pen Link](https://codepen.io/rdelafuente/pen/tJrik/) –
得到了解决按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;
}
如果APK APPS的答案帮助你,请不要忘记加入它。 –
Upvoted it ..但没有足够的声望:-( –
你会到达那里。:)仍然可以接受一个答案。 –
你能告诉我们你的代码?或者更好,创建一个[snippet](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/)或[plunker](https:// plnkr.co/edit/)? –
添加了代码和屏幕截图。对不起,我是新的stackoverflow。无法提供内联图像 –