以下是完整的代码：

Question

我有一个问题，已经有很长一段时间了，只是无法让它发挥作用，家伙帮助我在这里。

我有一个'AngularJS'，'HTML webapp'，该应用程序通过'OpenGraph'从'FB页面'获取帖子，数据以'JSON'格式显示，并在卡片中显示图像，包含图片和文本，用户可以向下滚动卡片，当前显示10张卡片，一切正常工作，除了一件事，当用户点击卡片上的图像时，它总是打开第一张图片，用户可以从那里左右滚动图像。

我需要的是，当用户点击照片时，就是显示的照片，而不是第一张照片。请帮忙！：）

'JSON'数据返回'数据数组'，所以我有10组数据。

这是在模态中加载照片的功能，并设置为'0'，因此它始终显示第一张图片：

  $scope.openModal = function() {
  $ionicSlideBoxDelegate.slide(0);
  $scope.modal.show();
  };

如何更改，以便图片对应于点击的图片？

如果有人想看一个正常工作的演示，请留下电子邮件，我会向您发送邀请，以便在“Ionic View”中查看该应用。

以下是完整的代码：

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) {
    
  	$scope.aImages = [{
      	'src' : $scope.pictures[0], 
      	'msg' : ''
    	}, {
        'src' : $scope.pictures[1], 
        'msg' : ''
        }, { 
        'src' : $scope.pictures[2], 
        'msg' : ''
        }, { 
        'src' : $scope.pictures[3], 
        'msg' : ''
        }, { 
        'src' : $scope.pictures[4], 
        'msg' : ''
        }, {
        'src' : $scope.pictures[5], 
      	'msg' : ''
    	}, {
        '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();
    };
  
  	$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>

Answer 1

您需要从视图中将参数传递给openModal()函数。像这样：

查看

<div class="modal image-modal transparent" ng-click="closeModal($index)">

然后在openModal函数上处理param：

<强>控制器

$scope.openModal = function(index) { $ionicSlideBoxDelegate.slide(index); $scope.modal.show(); };

全屏模态，显示第一张图片，需要显示点击的图片而不是第一张图片

以下是完整的代码：

1 个答案: