javascript - AngularJS POSTs vacías las solicitudes?

coffeescript sinatra

Question

Soy un novato en AngularJS y me he enfrentado a un problema cuando trato de hacer una solicitud POST con AngularJS y no envía ningún parámetro con ella. Yo uso Sinatra como una interfaz RESTful.

Así es como se ve mi backend Sinatra:

post ''/layer/:layer_id'' do
  @layer = PageLayer.where(id: params[:layer_id]).first
  @layer.content = params[:content]
  @layer.save
end

Si intenta enviar POST con la extensión Postman Chrome, ¡funciona! Sinatra guarda el contenido correctamente. Así que estoy seguro de que el backend funciona como debería.

Así es como se ve mi código de prueba angular:

TestCtrl = ($scope, $routeParams, $http, $resource) ->
    $scope.layer = []

    Layer = $resource(''/layer/:id'', {id:''@id''})

$scope.layer = Layer.get {id: $routeParams.layerId}, ->
    console.log "Got you!"

$scope.saveContent = ->
    $scope.layer.$save()
    console.log "Saved!"

angular.module(''appDirectives'', []).directive "test", ->
    return (scope, element, attrs) ->
        element.bind "blur", ->
            console.log("blur!")
            scope.saveContent()

Y código HTML:

<div>Content: {{layer.content}}</div>

<div>
    <form>
        <input type="text" test ng-model="layer.content">
    </form>
</div>

Entonces, la única pregunta es: ¿Qué pasa? ¿Por qué puedo hacer una solicitud correcta con Postman pero no con angularJS? Angular devuelve el "contenido" vacío para que Sinatra lo guarde como "" todo el tiempo.

También adjunté una estructura de una capa:

g {id: 27245, page_id: 2302, external_id: 26518, original_upload: null…}
content: "dfgdfg"
external_id: 26518
id: 27245
layerNumber: 8
page_id: 2302

¿Cómo puedo registrar exactamente qué POST angulares?

Answer 1

Está bien, he resuelto el problema. De alguna manera, Sinatra no obtenía correctamente los POST de Angular y no los ponía automáticamente en params. Entonces, si analizamos la solicitud manualmente, funciona. Como eso:

post ''/layer/:layer_id'' do
  @updated_layer = JSON.parse(request.body.string)
  @layer = PageLayer.where(id: params[:layer_id]).first
  @layer.content = @updated_layer[''content'']
  @layer.save 
end 

Answer 2

Oye, este es el problema exacto que estaba teniendo, y la respuesta ahora parece tan obvia. Sabía que Angular estaba enviando json, pero no importaba lo que probara, no funcionaba. Esto me condujo en la dirección correcta, pero en cuanto a analizar json tuve que escribir

ng_params = JSON.parse(request.body.read)

Tuve que cambiar ''cadena'' a ''leer''. Tal vez tengo una versión más nueva de la gema json o algo así. Mi proceso de salvar completo es así:

post ''/api/v1/test'' do
  ng_params = JSON.parse(request.body.read)
  @foo = Foo.new(ng_params)
  if @foo.save
    puts "Page Saved"
    content_type :json
    rabl :foos, format: "json"
  end
end

Utilizo rabl para formatear el json para tener control sobre los datos json que Sinatra envía de vuelta (sin correos electrónicos o contraseñas, por favor)

Mi código angular es solo esto (aún no implementé put, patch o delete, ni actualización automática de datos todavía. Aún debe actualizar la página para ver la nueva publicación.) Y para ser claro, tengo una tabla llamada '' foos '', donde el modelo de ActiveRecord es'' Foo '', y una columna llamada'' cualquier cosa ''(aparte de las marcas de tiempo y el id, que estoy seguro de que siempre están ahí).

// app declaration
var app = angular.module("App", [''ngResource'']);

// data service
app.factory(''Foo'', [''$resource'', function($resource) {
  return $resource(''/api/v1/test/:id'', {id: ''@id''});
}]);

// the controller
app.controller(''Controller'', function($scope, Foo) {

  $scope.foos = Foo.query();

  $scope.create = function(anything) {
    Foo.save({anything: anything}, function(foo){
      $scope.foos.push(foo);
    });
  };
});

Luego, en mi marcado, el formulario se ve así, donde lo importante es la llamada a ''crear'' con ''cualquier cosa'' como argumento en ''ng-submit''. Si tiene más de una columna en su tabla, llame a ''crear'' con más de un argumento, por ejemplo. ''crear (cualquier cosa, barra)''.

<h3>Add something new</h3>
<form ng-submit="create(anything)">
  <input ng-model="anything" type="text">
  <button type="submit">Do it</button>
</form>

Mientras se muestran los datos,

<li ng-repeat="foo in foos">
  <p>{{foo.anything}}</p>
</li>

Answer 3

Este enlace resolvió el problema. Solo agrega

gema ''analizador de rack''

a su Gemfile y agregue este código a config.ru. Funcionará como un encanto.

require ''rack/parser''
use Rack::Parser, content_types: {
  ''application/json'' => Proc.new {|body| JSON.parse body }
}