以离子滑动右键导航到下一页

Question

向右滑动时,我想进入博客列表的下一页.

我的观点是:

<p on-swipe-right="onSwipeRight()" ng-bind-html="blog.content"> {{blog.content}}</p> 

和控制器功能是:

 $scope.onSwipeRight = function () {
    // Do whatever here to manage swipe left
    //alert('Right swipped');
    .state('lab-components', {url: '/blog/:id'})
  }

但这不起作用.

Answer 1

我不明白这意味着什么:

.state('lab-components', {url: '/blog/:id'})

如果你想从一个状态移动到另一个状态,你可以使用$ state,特别是$ state.go().

在使用它之前,需要将其注入控制器:

.controller('homeController', function($scope, $state) {

    $scope.onSwipeRight = function (id) {
        $state.go('blogdetail', { blogId: id });
    }

})

正如你所看到的,我已经传递id给了我的onSwipeRight方法,所以我可以使用它去另一个状态作为参数传递它.

<p on-swipe-right="onSwipeRight(blog.id)">{{blog.content}}</p>

可能你也需要改变你的状态:

  $stateProvider.state('blogdetail', {
      url: '/blogdetail/:blogId',
      templateUrl: 'blogdetail.html',
      controller: 'blogdetailController',
  });

正如你可以看到我使用:blogId的参数.

它必须与我们在这里使用的名称相匹配:

$state.go('blogdetail', { blogId: id });

如果要在blogdetail控制器中读取该参数:

.controller('blogdetailController', function($scope, $stateParams){

    var id = $stateParams.blogId;

});

$stateParams服务将帮助您.必须注射.

这个plunker可能会帮助您了解事情的运作方式.