質問編集履歴

3 タイトルを修正しました。

aoshima.natsuki

aoshima.natsuki score 31

2015/10/27 20:50  投稿

controllerからserviceに動的に値を渡す方法について
AngularJSでcontrollerからserviceに動的に値を渡す方法について
複数のShopにShelfとItemがそれぞれネストされて繋がっている以下のようなモデル構成のとき、
ngResourceを使ってデータベースにitemを追加(save)する方法についてです。
Shop
└ Shelf
└ Item
Rails側では、レンダリングされたjson "/api/shops/:shop_id/shelfs/:shelf_id/items/:id" を呼び出すAPIに専念させ、Angular側から、serviceクラスのfactoryメソッドでそれを呼んでいます。
このとき、追加するitemに紐づく動的なshop_idとshelf_idの渡し方がわかりません...
「$scope.newItem = { ... }」の中で指定しているのですがどうやら渡せないみたいで困ってます。
なぜかわかる方、おられましたら教えていただいたいです。初歩的な質問ですみませんがよろしくお願いいたします。
《service》
```javascript
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' }})
```
《controller》
```javascript
angular.module('myApp').controller "shopEdit", ($scope, Shop, Item) ->
$scope.addItem = (shop, shelf) ->
# 保存
$scope.newItem = { body: shelf.item.body, shop_id: shop.id, shelf_id: shelf.id }
Item.save($scope.newItem)
$scope.newItem = newItem
return
```
  • JavaScript

    22770 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • AngularJS

    621 questions

    AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

  • CoffeeScript

    154 questions

    CoffeeScriptはプログラミング言語です。シンタックスシュガーの導入により、JavaScriptのコードに変換された後動作します。JavaScriptに比べ、可読性と簡潔性が向上しています。

2 書式を改善させました。

aoshima.natsuki

aoshima.natsuki score 31

2015/10/27 20:49  投稿

controllerからserviceに動的に値を渡す方法について
複数のShopにShelfとItemがそれぞれネストされて繋がっている以下のようなモデル構成のとき、
ngResourceを使ってデータベースにitemを追加(save)する方法についてです。
Shop
└ Shelf
    └ Item
Rails側では、レンダリングされたjson "/api/shops/:shop_id/shelfs/:shelf_id/items/:id" を呼び出すAPIに専念させ、Angular側から、serviceクラスのfactoryメソッドでそれを呼んでいます。
このとき、追加するitemに紐づく動的なshop_idとshelf_idの渡し方がわかりません...
「$scope.newItem = { ... }」の中で指定しているのですがどうやら渡せないみたいで困ってます。
なぜかわかる方、おられましたら教えていただいたいです。初歩的な質問ですみませんがよろしくお願いいたします。
《service》
```ここに言語を入力
```javascript
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' }})
```
《controller》
```ここに言語を入力
```javascript
angular.module('myApp').controller "shopEdit", ($scope, Shop, Item) ->
$scope.addItem = (shop, shelf) ->
 # 保存
 $scope.newItem = { body: shelf.item.body, shop_id: shop.id, shelf_id: shelf.id }
 Item.save($scope.newItem)
 $scope.newItem = newItem
 return
```
  • JavaScript

    22770 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • AngularJS

    621 questions

    AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

  • CoffeeScript

    154 questions

    CoffeeScriptはプログラミング言語です。シンタックスシュガーの導入により、JavaScriptのコードに変換された後動作します。JavaScriptに比べ、可読性と簡潔性が向上しています。

1 分かりづかったので書き直しました。

aoshima.natsuki

aoshima.natsuki score 31

2015/10/27 20:49  投稿

ngResourceでネストされたアイテムのsaveができず困っています
controllerからserviceに動的に値を渡す方法について
1つの Shop のなかに複数の Shelf がありその中に Item が格納されているケースを想定しています。
ngResourceを使ってjsonでレンダリングされた "/api/shops/:shop_id/shelfs/:shelf_id/items/:id" を呼び出して、データベースに item を追加しようとしています。
複数のShopにShelfとItemがそれぞれネストされて繋がっている以下のようなモデル構成のとき、
ngResourceを使ってデータベースにitemを追加(save)する方法についてです。
《controller》shop_edit.coffee
```javascript
angular.module("myApp").controller "shopEdit", ($scope, Shop, Shelf, Item) ->
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
Rails側では、レンダリングされたjson "/api/shops/:shop_id/shelfs/:shelf_id/items/:id" を呼び出すAPIに専念させ、Angular側から、serviceクラスのfactoryメソッドでそれを呼んでいます。
 $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
```
このとき、追加するitemに紐づく動的なshop_idとshelf_idの渡し方がわかりません...
「$scope.newItem = { ... }」の中で指定しているのですがどうやら渡せないみたいで困ってます。
なぜかわかる方、おられましたら教えていただいたいです。初歩的な質問ですみませんがよろしくお願いいたします。
《view》edit.html.slim
```html
(一部抜粋)
.item
 input name="name" ng-model="shelf.item.name" ng-blur="saveItem(shop, shelf)"
```
《service》shop.coffee
```javascript
angular.module('myApp').factory 'Shop', ($resource) ->
 $resource('/api/shops/:id', { id: @id }, { update: { method: 'PUT' }})
```
《service》item.coffee
```javascript
《service》
```ここに言語を入力
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 に置き換えないと正しく保存されません...
```javascript
$resource('/api/shops/:shop_id/shelfs/:shop_id/items/:id',
 { shop_id: '13495' },
 { update: { method: 'PUT' }})
```
原因が検討もつかず困っています... どうかよろしくお願いいたします。
《controller》
```ここに言語を入力
angular.module('myApp').controller "shopEdit", ($scope, Shop, Item) ->
$scope.addItem = (shop, shelf) ->
 # 保存
 $scope.newItem = { body: shelf.item.body, shop_id: shop.id, shelf_id: shelf.id }
 Item.save($scope.newItem)
 $scope.newItem = newItem
 return
```
  • JavaScript

    22770 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • AngularJS

    621 questions

    AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

  • CoffeeScript

    154 questions

    CoffeeScriptはプログラミング言語です。シンタックスシュガーの導入により、JavaScriptのコードに変換された後動作します。JavaScriptに比べ、可読性と簡潔性が向上しています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る