更新:コードを変更しました(この例に基づいて... http://www.script-tutorials.com/photo-gallery-with-angularjs-and-css3/)、右にスワイプすると機能しますが、左にスワイプすると機能しません ' t
画像ギャラリーのコントローラーを作成し、サムネイルをクリックするとメイン画像が変更されるようにしました。ただし、ng-swipe-leftでスワイプすると、メイン画像も次のサムネイル画像に変わります。メインの画像はスワイプして見えなくなりますが、新しい画像は表示されません。これが私のコントローラーです...
controller('blogpageCtrl', ['$scope','$routeParams','$http',
function($scope, $routeParams, $http){
$http.get('views/pages/' + $routeParams.articleId + '.json').success(function(data){
$scope.article = data;
//$scope.setImage = function(imageUrl){
//$scope.mainImageUrl = imageUrl;
//};
$scope._Index = 0;
// if a current image is the same as requested image
$scope.isActive = function (index) {
return $scope._Index === index;
};
// show prev image
$scope.showPrev = function () {
$scope._Index = ($scope._Index > 0) ? --$scope._Index : $scope.data.images.length - 1;
};
// show next image
$scope.showNext = function () {
$scope._Index = ($scope._Index < $scope.data.images.length - 1) ? ++$scope._Index : 0;
};
// show a certain image
$scope.showPhoto = function (index) {
$scope._Index = index;
};
});
}]);
ここに私のhtmlがあります...
<img ng-repeat="img in article.images" ng-swipe-right="showPrev()" ng-swipe-left="showNext()" ng-show="isActive($index)" ng-src="{{img}}" class="photobg">
<ul class="article-thumbs">
<li ng-repeat="img in article.images" ng-class="{'active':isActive($index)}">
<img ng-src="{{img}}" ng-click="showPhoto($index);">
</li>
</ul>
更新: user814628 が私を正しい方向に向けてくれてありがとう。単純化されたコードでコントローラーを変更することで機能しました....
$scope._Index = 0;
// if a current image is the same as requested image
$scope.isActive = function (index) {
return $scope._Index === index;
};
// show prev image
$scope.showPrev = function () {
$scope._Index = Math.max(0, $scope._Index - 1);
};
// show next image
$scope.showNext = function () {
$scope._Index = Math.min(3, $scope._Index + 1);
};
// show a certain image
$scope.showPhoto = function (index) {
$scope._Index = index;
};