Use Laravel Blade And AngularJS Together

By default AngularJS and Blade conflict with the way variables are called. Both use a double curly bracket {{ var }} syntax. There are a few workarounds such as changing Angular’s or Blade’s delimiters but an easier method is available.

Inside blade prefix Angular echo variables with the at “@“ symbol. Here is an example:

<li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
<span>@{{phone.name}}</span>
<p>@{{phone.snippet}}</p>
</li>

This will prevent blade from parsing it but will be correct when sent to the browser.

Nice and simple!

Want to read more like this?


Originally published at ericlbarnes.com on November 20, 2014.