LaravelのBladeテンプレートエンジンとAngularJSにおける二重の波括弧の競合と、その解決方法
サーバ側でLaravelフレームワーク、クライアント側でAngularJSを使う際に少しハマったのでメモです。
クライアント側でAngularJSを使用した時に以下のようにHTML内に二重波括弧を書くと
AngularJSのテンプレートエンジン機能によって囲まれた変数の値に置き換えてくれます。
(この表記法をエクスプレッションといいます)
<!-- {{ name }}の部分が置き換わります --> <div ng-controller="NameController"> <p class="name">私の名前は{{ name }}です。</p> </div>
しかしLaravelのBladeテンプレートエンジンでも全く同じ記法でViewに渡された変数を参照して書き出すことになっている為、
レスポンスを返す前にBladeの記法として解釈&変換をしてしまいます。
なのでBladeを適用させるファイル(*.blade.php)にこのHTMLを記載すると「nameなんて変数知らないからエラーやで」とサーバ側から怒られてしまいます。
そんな時は以下のようにエクスプレッションの直前に"@"を付け加えれば良いみたいです。
<!-- name.blade.php --> <div ng-controller="NameController"> <p class="name">私の名前は@{{ name }}です。</p> </div>
この書き方をすれば、LaravelはViewに渡された変数の値と置き換える代わりに"@"を消してレスポンスを返してくれます。