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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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!
Eric L. Barnes 
Depending on the amout of Angular bindings, you could also place it in a seperate partial angular-partial.php and include it using @include(‘angular-partial’).
The filename is an example, but notice is doesn’t have the .blade.php in it.
LikeLike
I tend to do the following and change the angularjs syntax:
var ngApp = angular.module('ngApp', ['module'], function($interpolateProvider){
//-- as the output conflicts with blade lets alter the defaults
$interpolateProvider.startSymbol('[[').endSymbol(']]');
})
.config(.....
SO then i can use the normal blade syntax and then [[ & ]] for my angular code.
LikeLike
If you do change the Blade syntax in Laravel 5 the escaped content method is changed:
Blade::setContentTags(‘[[‘, ‘]]’);
Blade::setRawTags(‘[!!’, ‘!!]’);
LikeLike
nice and clean. thank you, save my day. 🙂
LikeLike
you save my day, thank you so much. 🙂
LikeLike
Nice, it saved my life
LikeLike