1

1つの Shop のなかに複数の Shelf がありその中に Item が格納されているケースを想定しています。
ngResourceを使ってjsonでレンダリングされた "/api/shops/:shop_id/shelfs/:shelf_id/items/:id" を呼び出して、データベースに item を追加しようとしています。

《controller》shop_edit.coffee

angular.module("myApp").controller "shopEdit", ($scope, Shop, Shelf, Item) ->

  $scope.init = ->
    # Rails側でパラメータを取得してng-initからshop_idを設定
    shop_id = $scope.shop_id
    # Shopを取得
    Article.get(id: shop_id).$promise.then (shop) ->
      $scope.shop = shop
    return

  $scope.saveItem = (shop, shelf) ->
    # 保存
    $scope.newItem = { name: shelf.item.name, shop_id: shop.id, shelf_id: shelf.id }
    Item.save($scope.newItem)
    $scope.newItem = newItem
    return

《view》edit.html.slim

(一部抜粋)
.item
  input name="name" ng-model="shelf.item.name" ng-blur="saveItem(shop, shelf)"

《service》shop.coffee

angular.module('myApp').factory 'Shop', ($resource) ->
  $resource('/api/shops/:id', { id: @id }, { update: { method: 'PUT' }})

《service》item.coffee

angular.module('myApp').factory 'Item', ($resource) ->
  $resource('/api/shops/:shop_id/shelfs/:shelf_id/items/:id',
    { shop_id: '13495' },
    { shelf_id: '93' },
    { update: { method: 'PUT' }})

このとき、動的な値 shop_id と shelf_id をcontorollerから受け取れずに困っています。
$scope.newItem = { ... } の中で shop_id と item_id を指定し、Item.save($scope.newItem) で service 側に渡しているのですが正しく受け取れないようで困ってます(:shop_id, :shelf_id が空欄になり保存に失敗しています)。

また、なぜか、以下のように :shelf_id を :shop_id に置き換えないと正しく保存されません...

$resource('/api/shops/:shop_id/shelfs/:shop_id/items/:id',
  { shop_id: '13495' },
  { update: { method: 'PUT' }})

原因が検討もつかず困っています... どうかよろしくお願いいたします。

1 件の回答 1

2

item.coffee内での$resourceの使い方が間違っています。
第一引数はURLテンプレート、第二引数はデフォルトパラメータ、第三引数はアクションです。

angular.module('myApp')
.factory('Item', function($resource) {
  return $resource('', {}, {
    update: {
      url: '/api/shops/:shop_id/shelfs/:shelf_id/items/:id',
      method: 'PUT',
      params: {id: '@id', shop_id: '@shop_id', shelf_id: '@shelf_id'}
    }
  });
})

updateアクションを作るのでしたらこんな感じでしょうか。
これでコントローラからItem.update($scope.newItem)すればOKです。

POST系のメソッドでデータをURLテンプレートに展開したい場合、上のように@付きの書式でparamsを指定する必要があります。

公式ドキュメントをよくお読みください。
https://docs.angularjs.org/api/ngResource/service/$resource

2
  • ご回答いただいたコードですが、saveを追加して、 ``` save: { url: '/api/articles/:article_id/contents/:content_id/items', method: 'PUT', params: { article_id: '@article_id', content_id: '@content_id' } } ``` Item.save($scope.newItem) をしようとすると、404 Not Found になってしまいます。 ``` $resource('/api/articles/:article_id/contents/:content_id/items/:id', { article_id: '@article_id', content_id: '@content_id' }, { method: 'PUT' }) ``` こちらの上記のコードだと問題なくデータベースにaddできたのですが、 save: {} が呼ばれる前に指定しておかないといけないのでしょうか... 2015年10月28日 5:51
  • $resource()の第一引数はアクションのurlパラメータによって上書きされますので、アクションを指定する場合、必ずしも第一引数でURLを指定しておく必要はありません。次のfiddleをコンソールで見るとパラメータが展開されているのがわかると思います。jsfiddle.net/oaab6nsp/1 404エラーになる原因はこれだけの情報ではなんともいえません。
    – cither
    2015年10月28日 10:41

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。