Angular에서 Rails로 매개 변수 전달하기

Question

저는 Rails 응용 프로그램을 가지고 있으며 Angular 프론트 엔드에서 사용할 API를 노출하고 있습니다. 나는 내 큰 데이터 집합을 페이징 보석을 사용하고 있습니다. 보석은 : 페이지가 params를 통해 전달 될 것으로 예상합니다. 페이지

버튼은 잘 작동하고 nextPage 또는 prevPage 함수를 호출하지만, 어떤 이유로 페이지 번호와 PARAMS 은 레일 컨트롤러에 전달되지 않습니다 있습니다.

사용자가 다음 또는 이전 버튼을 누르면 레일 컨트롤러에서 데이터 묶음을 전달하고 화면에서 새로 고칩니다.

관련 질문 : Rails will_paginate gem with angular.js to do pagination

응용 프로그램/컨트롤러/API/data_sources_controller.rb

class Api::DataSourcesController < Api::BaseController 
    def index 
    Rails.logger.debug("index: datasources, page: #{params[:page]}") 
    render json: Cosmic.paginate(:page => params[:page], :per_page => 50) 
    end 
end 

응용 프로그램/자산/자바 스크립트/컨트롤러/DatasetController.js.coffee

angular.module('assaypipelineApp').controller "DatasetController", ($scope, $routeParams, $location, DataSet) -> 
    $scope.currentPage = 1 

    $scope.init = -> 
    @panel_id = $routeParams.panel_id 
    console.log("dataset init: #{@panel_id}") 
    @datasetsService = new DataSet(serverErrorHandler) 
    $scope.datasets = @datasetsService.all({page: $scope.currentPage}) 


    # pagination 
    $scope.prevPage = -> 
    console.log("prev #{$scope.currentPage}") 
    $scope.currentPage-- if $scope.currentPage > 0 
    $scope.datasets = @datasetsService.all({page: $scope.currentPage}) 


    $scope.nextPage = -> 
    console.log('next') 
    $scope.currentPage++ 
    $scope.datasets = @datasetsService.all({page: $scope.currentPage}) 

app/assets/javascripts 대답은 사실은 꽤 있었다 https://leanpub.com/angularails

: 뷰에서

angular.module('assaypipelineApp').factory 'DataSet', ($resource, $http) -> 
    class DataSet 
    constructor: (errorHandler) -> 
     console.log('dataset constructor') 
     @service = $resource('/api/data_sources/:id', 
     {id: '@id'}, 
     {update: {method: 'PATCH'}}) 
     @errorHandler = errorHandler 

     # Fix needed for the PATCH method to use application/json content type. 
     defaults = $http.defaults.headers 
     defaults.patch = defaults.patch || {} 
     defaults.patch['Content-Type'] = 'application/json' 

    all: -> 
     @service.query((-> null), @errorHandler) 

    find: (id, successHandler) -> 
     @service.get(id: id, ((data_set)-> 
     successHandler?(data_set) 
     data_set), 
     @errorHandler) 

/services/DataSetService.js.coffee는

<ul class="pagination pull-right"> 
    page {{currentPage}} 
    <li ng-class="{disabled: currentPage == 0}"> 
     <a href ng-click="prevPage()">« Prev</a> 
    </li> 
    <li ng-repeat="n in range(pagedItems.length)" 
     ng-class="{active: n == currentPage}" 
    ng-click="setPage()"> 
     <a href ng-bind="n + 1">1</a> 
    </li> 
    <li ng-class="{disabled: currentPage == pagedItems.length - 1}"> 
     <a href ng-click="nextPage()">Next »</a> 
    </li> 
</ul> 

Answer 1

잘 나는이 책의 도움으로, 그것을 해결 단순한.

# pagination 
$scope.setPage = (newPage) -> 
    newPage = 1 if newPage < 1 
    $scope.currentPage = newPage 
    $scope.getPage() 

$scope.getPage =() -> 
    http = 
    method: "GET" 
    url: "/api/data_sources" 
    params: 
     page: $scope.currentPage 
    $http(http) 
    .success (response) -> 
     console.log(response) 
     $scope.datasets = response