読者です 読者をやめる 読者になる 読者になる

紺屋高尾

ぬしの女房はんに、わちき、なりたいんざます。来年三月十五日、年季(ねん)が明けるんざます。そのときは眉毛落として歯に鉄漿(かね)染めて、ぬしの傍に参りんすよって、お内儀(かみ)さんにしてくんなますか?

Turbolinksを有効にしたままでangularjsを使用する

Turbolinks and Angularjs

最近はangularjsとRails4の組み合わせであそ、、、仕事しています。 まだまだangularjs触り始めて数日ですが、Turbolinksを有効にしているとng-showなどが画面遷移した際に上手く動かなかったのにハマったので、解決方法を自分用にメモ。

htmlからng-appを削除する

普通(?)はhtmlタグに

<html ng-app='MyApp'>

とか書くと思うんですが、これを削除します。

<html>

app.js.coffeeでbootstrapする

 window.App = angular.module('myApp', ['ngResource'])
$(document).on('ready page:load', ->
  angular.bootstrap(document.body, ['myApp'])
)

2~4行目を追記することで、turbolinkを有効にしていてもangularjsがbootstrapingされるので正常にng-showなどが動作しました。

備考

まだそこまでガッツリangularjsで書きまくっている訳ではないので、なにか問題でるかもしれませんが、

  1. inputに名前を入力
  2. /api/hoge/fugaにgetしてその名前が既に存在しているかチェック
  3. 既に存在していたら「その名前は既に使われています」みたいなalertを表示

くらいのは上記の方法でも正常に動作しました。

Good Luck!