Front-end beginner's luck

フロントエンドに関して学んだ知識をメモしておくブログです

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に渡された変数の値と置き換える代わりに"@"を消してレスポンスを返してくれます。