在AngularJS中使用ng-animate向左/向右滑动

Question

当分别点击左/右按钮时，我真的很难将AngularJS中的内容向左/右滑动。

我知道可以使用ng-animate完成，但我不知道如何在我的AngularJS代码中执行此操作。

以下是我的代码。如果你能帮助我，我将非常感激。

HTML

<div class="page">
    <div class="content">
        <div class="previous-btn" ng-click="goToPrevSlide(currSlide)">
            <a href="#" ng-click="goToPrevSlide(currSlide)" class="left-arrow"></a>
        </div>
        <div class="slide">
            <img src="{{getCurrentSlide().img}}" width="800" height="500" />
        </div>
        <div class="video">
            <div id="myvideo" width="140" height="220"></div>
            <div class="speaker-info">
                <p class="speaker-name">{{getCurrentSlide().speaker}}</p>
                <p class="speaker-title">{{getCurrentSlide().title}}</p>
            </div>
        </div>
        <div class="next-btn" ng-click="goToNextSlide(currSlide)">
            <a href="#" ng-click="goToNextSlide(currSlide)" class="right-arrow"></a>
        </div>
    </div>
</div>

JS

function getPresentationData(){

    var data = {};

    data.title = 'Site's Title';

    data.pages = [];
    data.subMenu = [];



    data.subMenu[0] = {};    
    data.subMenu[0].list = [];
    data.subMenu[0].list[0] = {heading:'Background', number: 1};
    data.subMenu[0].list[1] = {heading:'Second One', number: 3};
    data.subMenu[0].list[2] = {heading:'Third One', number: 4};

    data.pages[0] = {};
    data.pages[0].menuTitle = 'Introduction';
    data.pages[0].slides = [];
    data.pages[0].slides[0] = {heading:'Heading 1: profile', speaker: 'Speaker's Name', title:'Expert in something', img:'content/pg-3.jpg', video:'content/videos/3.flv'};
    data.pages[0].slides[1] = {heading:'Heading2: Background and experience in something', speaker: 'Some Speaker', title:'Expert in something', img:'content/pg-4.jpg', video:'content/videos/4.flv'};



    data.subMenu[1] = {};    
    data.subMenu[1].list = [];
    data.subMenu[1].list[0] = {heading:'First Case', number: 3};
    data.subMenu[1].list[1] = {heading:'Second Case', number: 5};
    data.subMenu[1].list[2] = {heading:'Third Case', number: 9};

     ...

    return data;
}


var smartPresentationModule = angular.module('smartPresentationModule', [])

/*
smartPresentationModule.config(function($locationProvider, $routeProvider) {
    $locationProvider.html5Mode(false);

     $routeProvider
     .when('/show/:pageno/:slideno', {
     event: 'showslide'
     })
     .otherwise({ redirectTo: '/' });

     $scope.$on('someEve', function(){
     //console.log('someEve occured::caught by on method...');
     });
     $scope.$broadcast('someEve');

});
*/


function presentationController($scope, $location){

    $scope.data = getPresentationData();

    $scope.currPage = 0;
    $scope.currSlide = 0;

    $scope.goToPage = function(pageIndex){
        $('.slide-container').hide();
        $scope.currSlide = 0; 
        $scope.currPage = pageIndex;
        $('.slide-container').fadeIn(500);
    };

    $scope.goToPrevPage = function(){ 
        if ($scope.currPage===0){
            $scope.currPage = $scope.data.pages.length-1;
        }else{
            $scope.currPage = $scope.currPage-1;        
        }
        $scope.currSlide = 0; 
    };

    $scope.goToNextPage = function(){ 
        if ($scope.currPage===($scope.data.pages.length-1)){
            $scope.currPage = 0;
        }else {
            $scope.currPage = $scope.currPage + 1;
        }
        $scope.currSlide = 0; 
    };

    $scope.goToSpecificPage = function(pageIndex, slideIndex){ 

        $('.slide').hide(); //.slide-container

        $scope.currPage = pageIndex;
        $scope.currSlide = slideIndex; 

       $('.slide').animate({"width":"show", opacity: 1}, 700); //.slide-container
    };

    $scope.getCurrentSlide = function() { 

        return $scope.data.pages[$scope.currPage].slides[$scope.currSlide]; 
    };

    $scope.goToSlide = function(slideIndex){ $scope.currSlide = slideIndex; };

    $scope.goToPrevSlide = function(){
        $('.slide').hide(); //.slide-container
        if ($scope.currSlide===0){
            $scope.goToPrevPage();
            $scope.currSlide = $scope.data.pages[$scope.currPage].slides.length-1;
        }else{
            $scope.currSlide = parseInt($scope.currSlide)-1;
        }
        $('.slide').animate({"width":"show", opacity: 1}, 700); //.slide-container

    };

    $scope.goToNextSlide = function(){
        $('.slide').hide(); //.slide-container
        if ($scope.currSlide===($scope.data.pages[$scope.currPage].slides.length-1)){
            $scope.goToNextPage();
            $scope.currSlide = 0;
        }else{
            $scope.currSlide = parseInt($scope.currSlide)+1;
        }
        $('.slide').animate({"width":"show", opacity: 1}, 700); //.slide-container

    };


    $scope.$watch( function(){ return $scope.currPage+':'+$scope.currSlide; }, function() {
        jwplayer("myvideo").setup({
            autostart: true,
            controlbar: {position: 'bottom'},
            skin: "scripts/vendor/jwplayer/simple.zip",

            flashplayer: "scripts/vendor/jwplayer/player-licensed.swf",
            file: $scope.getCurrentSlide().video
        });
        if (!$scope.getCurrentSlide().video.length) {
            $(".video").hide(); 
        }
        else {
            $(".video").show(); 
        }
    });
}

感谢。

Answer 1

您可以收听http://docs.angularjs.org/api/ngRoute.$route发送的$routeChangeSuccess事件。这种方式在您的 presentationController 中，您可以拥有$scope.$on('presentationController', function(angularEvent, next) {});

根据下一个和当前位置调用 goToXPage（）。

您还可以查看this post，了解如何使用ng-view实现类似的视图滑动。