1
我有一個問題，一直在這個很長時間，只是不能得到它的工作，傢伙的幫助我在這裏。全屏模式，顯示第一張圖片，需要顯示點擊圖片而不是第一張圖片
我有'AngularJS'，'HTML webapp'，應用程序通過'OpenGraph'從'FB頁面'獲取帖子，數據以'JSON'格式發送，並將圖片顯示在卡片中，並帶有圖片和文本，用戶可以向下滾動顯示卡片，當前顯示10張卡片，除了一件事情之外，一切都運行良好，當用戶單擊卡片上的圖像時，它總是打開第一張圖像，從那裏用戶可以左右滾動瀏覽圖片。
我需要的是，當用戶點擊一張照片時，它顯示的是照片，而不是第一張照片。請幫忙！ :)
'JSON'數據返回'數據數組'，所以我有10組數據。
這是加載在模態照片的功能，並設置爲「0」，所以它始終顯示的第一張照片：
$scope.openModal = function() {
$ionicSlideBoxDelegate.slide(0);
$scope.modal.show();
};
我怎樣才能改變這種狀況，所以畫面會對應點擊圖片？
如果有人想看到一個工作演示，留下您的電子郵件，我會給您發送邀請，以查看'離子視圖'內的應用程序。
這裏是下面的完整代碼：
angular.module('mattymode.controllers', ['ionic'])
.controller('FB_Ctrl', function($scope,$http) {
function makeHttpRequest() {
try {return new XMLHttpRequest();}
catch (error) {}
try {return new ActiveXObject("Msxml2.XMLHTTP");}
catch (error) {}
try {return new ActiveXObject("Microsoft.XMLHTTP");}
catch (error) {}
throw new Error ("HTTP Request Could not be completed.");
}
var appID = "appID";
var appSecret = "appSecret";
var accessTokenRq = makeHttpRequest();
var httpString = 'https://graph.facebook.com/oauth/access_token?grant_type=client_credentials&client_id='+appID+'&client_secret='+appSecret;
accessTokenRq.open("GET",httpString,true);
accessTokenRq.send(null);
var access_token;
accessTokenRq.onreadystatechange = function() {
if (accessTokenRq.readyState == 4) {
access_token = accessTokenRq.responseText;
//alert("It works!");
var request = makeHttpRequest();
request.open("GET",'https://graph.facebook.com/fbpageid/posts?'+access_token+'&fields=id,message,picture,link,name,description,type,icon,likes,comments,created_time,from,object_id&limit=10)',true);
request.send(null);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var response = request.responseText;
console.log(response);
var fbData = angular.fromJson(response);
var data = fbData.data;
var messageArray = [];
var pictureArray = [];
var likeArray = [];
var dateArray = [];
var linkArray = [];
var typeArray = [];
var commentArray = [];
var objects = [];
for (var i = 0; i < data.length; i++) {
var entry = data[i];
// Message
if (entry.message) {
var message = entry.message;
messageArray.push(message);
}
else {messageArray.push(" ");}
// Picture
if(angular.equals(entry.type,"photo")) {
var pic = "https://graph.facebook.com/"+entry.object_id+"/picture?type=normal";
pictureArray.push(pic);
}
else if (angular.equals(entry.type,"link")) {
pictureArray.push(entry.picture);
}
else {pictureArray.push("empty");}
//console.log(pic);
// Likes
if (entry.likes) {
var likeData = entry.likes;
likeArray.push(likeData.data.length+" Likes");
}
else {likeArray.push(" Likes");}
// Date
var created = entry.created_time;
var rawDate = created.split("T");
var date = rawDate[0];
var rawTime = rawDate[1];
var time = rawTime.split(":");
var betaTime = time[0]+":"+time[1];
var finalTime = addOneHour(betaTime);
dateArray.push(date+" - "+finalTime);
function addOneHour(time) {
var seperatedTime = time.split(":");
var hourTime = seperatedTime[0];
var returningTime = "";
if (seperatedTime.indexOf("00") > -1) {returningTime = "01";}
if (seperatedTime.indexOf("01") > -1) {returningTime = "02";}
if (seperatedTime.indexOf("02") > -1) {returningTime = "03";}
if (seperatedTime.indexOf("03") > -1) {returningTime = "04";}
if (seperatedTime.indexOf("04") > -1) {returningTime = "05";}
if (seperatedTime.indexOf("05") > -1) {returningTime = "06";}
if (seperatedTime.indexOf("06") > -1) {returningTime = "07";}
if (seperatedTime.indexOf("07") > -1) {returningTime = "08";}
if (seperatedTime.indexOf("08") > -1) {returningTime = "09";}
if (seperatedTime.indexOf("09") > -1) {returningTime = "10";}
if (seperatedTime.indexOf("10") > -1) {returningTime = "11";}
if (seperatedTime.indexOf("11") > -1) {returningTime = "12";}
if (seperatedTime.indexOf("12") > -1) {returningTime = "13";}
if (seperatedTime.indexOf("13") > -1) {returningTime = "14";}
if (seperatedTime.indexOf("14") > -1) {returningTime = "15";}
if (seperatedTime.indexOf("15") > -1) {returningTime = "16";}
if (seperatedTime.indexOf("16") > -1) {returningTime = "17";}
if (seperatedTime.indexOf("17") > -1) {returningTime = "18";}
if (seperatedTime.indexOf("18") > -1) {returningTime = "19";}
if (seperatedTime.indexOf("19") > -1) {returningTime = "20";}
if (seperatedTime.indexOf("20") > -1) {returningTime = "21";}
if (seperatedTime.indexOf("21") > -1) {returningTime = "22";}
if (seperatedTime.indexOf("22") > -1) {returningTime = "23";}
if (seperatedTime.indexOf("23") > -1) {returningTime = "00";}
console.log(returningTime+":"+seperatedTime[1]);
return returningTime+":"+seperatedTime[1];
}
// Link
if (entry.link) {linkArray.push("empty");}
else {linkArray.push("empty");}
// Comments
if (entry.comments) {
var commentData = entry.comments;
commentArray.push(commentData.data.length+" Comments");
}
else {
commentArray.push("0 Comments");
}
typeArray.push(entry.type);
}
for (var i = 0; i < dateArray.length; i++) {
// Only Text
if ((angular.equals(linkArray[i],"empty")) && (angular.equals(pictureArray[i],"empty"))) {
objects.push('<div class="list card"><div class="item thumbnail-left"> <h2>Matty Mode</h2><p>'+dateArray[i]+'</p></div><div class="item item-body"><p>'+messageArray[i]+'</p><p><span class="subdued">'+likeArray[i]+'</span> <span class="subdued">'+commentArray[i]+'</span></p></div> <a class="button-block button">Bekijk</a> </div>');
}
// No Link, picture availiable
else if ((angular.equals(linkArray[i],"empty")) && (angular.equals(pictureArray[i],"empty")) == false) {
objects.push('<div class="list card"><div class="item thumbnail-left"> <h2>Matty Mode</h2><p>'+dateArray[i]+'</p></div><div class="item item-body"><img src="'+pictureArray[i]+'" width=100%></img> <p>'+messageArray[i]+'</p><p><span class="subdued">'+likeArray[i]+'</span> <span class="subdued">'+commentArray[i]+'</span></p></div> <a class="button-block button">Bekijk</a> </div>');
}
// The rest
else {
objects.push('<div class="list card"><div class="item thumbnail-left"> <h2>Matty Mode</h2><p>'+dateArray[i]+'</p></div><div class="item item-body"><a href='+linkArray[i]+' ><img src="'+pictureArray[i]+'" width=100%></img></a> <p>'+messageArray[i]+'</p><p><span class="subdued">'+likeArray[i]+'</span> <span class="subdued">'+commentArray[i]+'</span></p></div> <a class="button-block button">Bekijk</a> </div>');
}
}
$scope.entries = objects;
$scope.pictures = pictureArray;
}
}
}
}
})
.controller('IMG_Ctrl', ['$scope', '$ionicModal', '$ionicSlideBoxDelegate', function ($scope, $ionicModal, $ionicSlideBoxDelegate) {
\t $scope.aImages = [{
\t 'src' : $scope.pictures[0],
\t 'msg' : ''
\t }, {
'src' : $scope.pictures[1],
'msg' : ''
}, {
'src' : $scope.pictures[2],
'msg' : ''
}, {
'src' : $scope.pictures[3],
'msg' : ''
}, {
'src' : $scope.pictures[4],
'msg' : ''
}, {
'src' : $scope.pictures[5],
\t 'msg' : ''
\t }, {
'src' : $scope.pictures[6],
'msg' : ''
}, {
'src' : $scope.pictures[7],
'msg' : ''
}, {
'src' : $scope.pictures[8],
'msg' : ''
}, {
'src' : $scope.pictures[9],
'msg' : ''
}];
//console.log($scope.pictures);
$ionicModal.fromTemplateUrl('image-modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});
$scope.openModal = function() {
$ionicSlideBoxDelegate.slide(0);
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
// Cleanup the modal when we're done with it!
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
// Execute action on hide modal
$scope.$on('modal.hide', function() {
// Execute action
});
// Execute action on remove modal
$scope.$on('modal.removed', function() {
// Execute action
});
$scope.$on('modal.shown', function() {
console.log('Modal is shown!');
});
// Call this functions if you need to manually control the slides
$scope.next = function() {
$ionicSlideBoxDelegate.next();
};
$scope.previous = function() {
$ionicSlideBoxDelegate.previous();
};
\t $scope.goToSlide = function(index) {
$scope.modal.show();
$ionicSlideBoxDelegate.slide(index);
};
// Called each time the slide changes
$scope.slideChanged = function(index) {
$scope.slideIndex = index;
};
}
])
.controller('FAQ_Ctrl', function($scope) {
$scope.groups = [];
$scope.groups = [
{ name: 'Hoe werkt deze app?', id: 1, items: ['Met deze app kunt u onze hipste en meeste betaalbare mode bekijken op uw mobiel of tablet. Elke week zullen er meerdere outfits beschikbaar zijn, daar wij iedere weekeen nieuwe collecite in de winkel hebben, waarvan de meeste slechts voor een korte periode beschikbaar zijn.']},
{ name: 'Reserveren', id: 2, items: ['Ja, dat kan, u kunt ons bellen of whatsappen op nummer 06-28656008, wat u het fijnst vindt, let wel, wij hangen de bestelling voor maximaal 3 dagen apart, daarna gaat het terug bij de collectie.']},
{ name: 'Retourneren', id: 3, items: ['U kunt artiekelen binnen 1 week ruilen, op vertoon van de bijbehorende kassabon, mits deze niet gedragen en/of gewassen zijn, en enkel als de kaartjes nog aan de kleding vastzitten. LET WEL: Wij geven geen geld terug, u ontvangt van ons een tegoedbon, voor het aankoopsbedrag.']},
{ name: 'We geven geen garantie', id: 4, items: ['Strasssteentjes', 'Kwastjes', 'Kettingen', 'Emblemen', 'Loslatende naalden of stikkels', 'Verkeerde wasvoorschriften/gebruik']},
];
/*
* if given group is the selected group, deselect it
* else, select the given group
*/
$scope.toggleGroup = function(group) {
if ($scope.isGroupShown(group)) {
$scope.shownGroup = null;
} else {
$scope.shownGroup = group;
}
};
$scope.isGroupShown = function(group) {
return $scope.shownGroup === group;
};
});/* Fullscreen image */
.transparent {
background: transparent !important;
}
.image-modal {
width: 100% !important;
height: 100%;
top: 0 !important;
left: 0 !important;
}
.fullscreen-image {
max-width: 100%;
max-height: 100%;
bottom: 0;
left: 0;
margin: auto;
overflow: auto;
position: fixed;
right: 0;
top: 0;
}
.slider {
width: 100%;
height: 100%;
}
p.info {
position: absolute;
bottom: 55px;
margin: 0 auto;
width: 100%;
display: block;
text-align: center;
font-size: 28px;
color: #ffffff;
}
/* Fix modal backdrop for smaller devices */
@media (max-width: 679px) {
.active .modal-backdrop-bg {
opacity: .5;
}
.modal-backdrop-bg {
-webkit-transition: opacity 300ms ease-in-out;
transition: opacity 300ms ease-in-out;
background-color: #000;
opacity: 0;
}
}
/* Accordion lists */
body {
cursor: url('http://ionicframework.com/img/finger.png'), auto;
}
/*
* http://docs.angularjs.org/api/ng/directive/ngShow#usage_animations
*/
.list .item.item-accordion {
line-height: 38px;
padding-top: 0;
padding-bottom: 0;
transition: 0.09s all linear;
}
.list .item.item-accordion.ng-hide {
line-height: 0px;
}
.list .item.item-accordion.ng-hide-add,
.list .item.item-accordion.ng-hide-remove {
display: block !important;
}
.item.wrap, .item-content.wrap {
white-space: normal;
}<ion-view view-title="Outfits" style="background-color:#333333">
<ion-content class="padding">
<p style="text-align:center"><img src="img/mm_icon.png"></p>
<div class="list" >
<div ng-repeat = "entry in entries track by $index" ng-bind-html="entry" ng-click="openModal()" ng-controller="IMG_Ctrl">
<script id="image-modal.html" type="text/ng-template">
<div class="modal image-modal transparent" ng-click="closeModal()">
<ion-slide-box on-slide-changed="slideChanged(index)" show-pager="false">
<ion-slide ng-repeat="oImage in aImages">
<img ng-src="{{oImage.src}}" class="fullscreen-image" />
<p class="info">{{oImage.msg}}</p>
</ion-slide>
</ion-slide-box>
</div>
</script>
</div>
</div>
</ion-content>
</ion-view>