質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.35%

  • JavaScript

    22081questions

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

  • AngularJS

    618questions

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

  • CoffeeScript

    152questions

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

ng-resourceでDBに保存後、すぐにeditページにredirectさせたい

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 644
退会済みユーザー

退会済みユーザー

自己解決できなかったのでこちらで質問させていただきます。
ng-resourceを使ってRailsで作ったAPIにアクセスし、ショップ(Shop)の作成、アイテム(Item)の作成/更新/削除を永続化できる機能を実装しています。1つのShopには複数のItemが紐付いており、Shopを作成すると作成されたidでItemのeditページにredirectさせたいです。

Shop(1) <-> Item(n)

viewから、shop.name と shop.place を送信できるフォームをつくりShopControllerで受け取った情報をShopServiceに渡して保存。保存されたidをもとにeditページにredirectさせたいのですがその方法がわかりません。phpではmysqli_insert_idなどで直前にinsertされたアイテムのidが取れますがAngularで同じようなことをするにはどうすればよいのでしょうか。

単純に new_shop.id とかで取得できるのでは...と思ったのですがダメで、保存された値(ここではid)を取得する方法が思いつかず、詰まってしまいました。new_shop の配列には確かに入っている(console.dir new_shopで確認しました)のですが取り出し方がわかりません。。

こういった場合は、サーバーサイドのcontroller側にredirect処理を任せた方がbetterなのでしょうか。できればAngular側のcontrollerでredirect処理までを完結させたいのですが良い方法がありましたら教えていただきたいです。
どうかよろしくお願いいたします。

= = =

controllers/ShopController.coffee
angular.module('test-20150703').controller "ArticleController", ($scope, $window, $location, Shop, Item) ->
  $scope.addShop = (shop) ->
    @shopService = new Shop(serverErrorHandler)
    # 受け取った情報をdbに保存
    new_shop = @shopService.create(name: shop.name, place: shop.place)
    # Objectのなかに確かにname,placeとidも格納されている
    console.dir new_shop
    # undefinedになってしまいます
    console.log new_shop.id
    $window.location.href = "/shops/【ここに入るidを動的に変更させたい】/edit"
    return

= = =

services/ShopService.coffee
angular.module('test-20150703').factory 'Shop', ($resource, $http) ->
  class Shop
    constructor: (errorHandler) ->
      @service = $resource('/api/shops/:id',
        { id: '@id' },
        { update: { method: 'PUT' }})
      @errorHandler = errorHandler

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

    create: (attrs) ->
      new @service(shop: attrs).$save ((shop) -> attrs.id = shop.id), @errorHandler
      attrs
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

0

CoffeeScriptは分からないので言葉で説明します。
ngResourceのメソッドは呼び出しただけでは値の入るガワを返すだけで、実際の中身は空です。
saveメソッドの第2引数か第3引数でコールバックが取れるので、その中だと確実に値が入ってきます。

もしくは、$promiseでpromiseオブジェクトが取得出きるので、そこで解決するのもアリです。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/07/07 16:26

    すみません、、ちょっと理解ができていないのでもう少し詳しく教えていただけないでしょうか。以下のようにしてみましたが上手くいきません...

    create: (attrs) ->
    shop.$promise.then ->
    new @service(shop: attrs).$save ((shop) -> attrs.id = shop.id), @errorHandler
    console.log shop
    return

    キャンセル

  • 2015/07/07 16:54

    ShopController.coffeeの方で、

    new_shop = @shopService.create(name: shop.name, place: shop.place)
    // この下に書く
    new_shop.$promise.then ->
    console.log new_shop.id
    $window.location.href = "/shops/" + new_shop.id + "/edit"

    こんな感じでしょうか。CoffeeScript分からないので違ってるかもしれません。

    ngResourceのsaveを実行した直後には値が入らないのですが、
    $promiseオブジェクトがresolveしたタイミングで値が入ります。

    キャンセル

  • 2015/07/07 18:42

    ご回答ありがとうございます。さっそく試しました。
    一見上手くいきそうに思えたのですがエラーで止まってしまいました。Error: [$injector:unpr]のようでした。
    article.$promise.then -> の記述だけでダメなようです。いろいろ試行錯誤しましたし文法も特に間違っていないと思うのですが、、Angular難しいです...

    = = =

    [[services/ShopService.coffee]]
    create: (attrs) ->
    new @service(shop: attrs).$save ((shop) -> attrs.id = shop.id), @errorHandler

    [[controllers/ShopController.coffee]]
    $scope.addShop = (shop) ->
    @shopService = new Shop(serverErrorHandler)
    new_shop = @shopService.create(name: shop.name, place: shop.place)
    new_shop.$promise.then ->
    alert shop.id
    $window.location.href = "/shops/"+new_shop.id+"/edit"
    return

    キャンセル

0

間違って投稿してしまったのでこの回答は削除いたしました。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    22081questions

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

  • AngularJS

    618questions

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

  • CoffeeScript

    152questions

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