Friday, August 1, 2014

Resolving Laravel blade template engine and angularjs conflict

If you use angular.js with laravel for the first time, then you might be interested in how to solve double curly brackets conflict.

{{ variable }}

How can we solve this? Actually we have several ways:

1. Change the angular.js tags

var angularAppName = angular.module('angularAppName', [], function($interpolateProvider) {
    $interpolateProvider.startSymbol('{%'); // This might be dangerous, if you use Twig (if you know what I mean)
    $interpolateProvider.endSymbol('%}');
});

Now you can use your angular expressions like: {% 1 + 2 %}

2. Change the blade templating tags

Blade::setContentTags('<%', '%>'); // For average variables
Blade::setEscapedContentTags('<%%', '%%>'); // For escaped variables

Now you can use your blade expressions like: {% $someVariable %}

Of course you can refuse to use Blade Templates and use Twig instead (search for Laravel Twig bridge in google), or use native PHP as a template engine. This can also solve this problem.

This note was made by me, but original article you can finde here: http://scotch.io/bar-talk/quick-tip-using-laravel-blade-with-angularjs