Question

我点击时使用ngRoute将故事列表过滤到一个特定的故事中，如下所示：

myApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
    when('/stories', {
        templateUrl: '/partials/stories.html',
        controller: 'StoryListCtrl'
    }).
    when('/stories/:storyID', {
        templateUrl: '/partials/story.html',
        controller: 'StoryDetailCtrl'
    });
}]);

这很好用，但我怎样才能得到＆＃34; next＆＃34;和＆＃34;之前＆＃34;故事。用户需要能够在故事之间向左和向右滑动，但我不能简单地加载它们 - 我需要加载每个故事和其中任何一个故事。然后，当用户以任一方式滑动时，将删除一个故事并添加一个新故事。

Angular有可能吗？我已经疯狂搜索但无论如何都无法找到任何在线参考资料。

谢谢你的时间！

Answer 1

你可以使用角度ng-swipe。例如比方说，你有这些文件如下。

<强> story.html

<div ng-swipe-left="nextStory()" ng-swipe-right="previousStory()" >
    {{storyID}}
</div>

<强> StoryDetailCtrl

myApp.controller('StoryDetailCtrl', function ($scope, $routeParams, $location) {
    $scope.storyID = $routeParams.storyID;
    $scope.nextStory = function () {
            var storyID = $routeParams.storyID;
            var path = 'stories/' + (storyID + 1 );
            $location.path(path);
            //console.log("This is left Swipe.");
        };

        $scope.previousStory = function () {
            var storyID = $routeParams.storyID;            
            var path = 'stories/' + (storyID - 1 );}            
            $location.path(path);
            //console.log("This is right Swipe.");
        };
});

确保将ngTouch作为依赖项注入模块中，作为['ngTouch']

希望对你有意义。

Answer 2

当用户滑动时，您需要发送一个包含当前ID和方向的查询，这样您知道的是下一个并且如果之前已经离开，则表示您可以查询

右：比当前ID高1：

左：比当前ID少<1>

无方向：只需加载当前ID

对于滑动，您也可以使用$swipe服务，ngSwipeLeft和ngSwipeRight。

你可以在路由/故事/：storyID执行之前解决一个函数，通过传递id和方向，或者你可以修改你的路线以支持方向，如/ stories /：storyID /：orientation和orientation可以为null

看看你可能有的这个article作为一个例子，我只是想强调如何计算当前页面和angularjs中的滑动功能，这可能适用于你的场景。

angular.module('website', ['ngAnimate', 'ngTouch'])
    .controller('MainCtrl', function ($scope) {
        /* Code omitted */

        $scope.direction = 'left';
        $scope.currentIndex = 0;

        $scope.setCurrentSlideIndex = function (index) {
            $scope.direction = (index > $scope.currentIndex) ? 'left' : 'right';
            $scope.currentIndex = index;
        };

        $scope.isCurrentSlideIndex = function (index) {
            return $scope.currentIndex === index;
        };

        $scope.prevSlide = function () {
            $scope.direction = 'left';
            $scope.currentIndex = ($scope.currentIndex < $scope.slides.length - 1) ? ++$scope.currentIndex : 0;
        };

        $scope.nextSlide = function () {
            $scope.direction = 'right';
            $scope.currentIndex = ($scope.currentIndex > 0) ? --$scope.currentIndex : $scope.slides.length - 1;
        };
    })

喝彩！

Answer 3

假设您有/stories页面中显示的故事列表，现在使用<a ng-href="yourCtrl.getStoryHref()" />Full Story</a>;现在您转到显示完整故事的故事页面。在这里你有上一个和下一个链接，它将带你到上一个/下一个故事 <a ng-href="yourCtrl.getNextStoryHref()" />Next Story</a>和<a ng-href="yourCtrl.getPrevStoryHref()" />Previous Story</a>

或者，如果您想在移动设备上使用它，可以使用ng-touch或fastclick。在ng-touch中，您可以使用ng-swipe-left和ng-swipe-right

<!-- Your Story Div -->
<div ng-swipe-right="yourCtrl.moveToNextStory">Content</div>

在控制器内的moveToNextStory函数中，将$ location.path设置为下一个故事的路径

获取AngularJS中的“下一个”和“上一个”项目？

3 个答案: