Using Twig variable in AngularsJS

Question

I'm using Symfony2 with Twig and AngularJS. I need to pass Twig variable to angular's function. Currently I tried doing that like this: ng-click="submitPost({{ channelName }})" but when I console.log to check that variable I see it as undefined. How do I pass Twig variables to angular functions?

use {% verbatim %} twig.sensiolabs.org/doc/tags/verbatim.html or modify angularjs brackets to another sign — Perroin Thibault
– Perroin Thibault, Commented Jun 9, 2015 at 7:27

LordTribual · Accepted Answer · 2015-06-09 07:29:57Z

5

If you are using Twig with AngularJS you will most likly run into conflicts as you might know. One solution is to use Angulars $interpolateProvider to change the start and end interpolation tags like so:

angular.module('myApp', []).config(function($interpolateProvider){
    $interpolateProvider.startSymbol('{[{').endSymbol('}]}');
});

In this case Angular will use {[{ and }]} to interpolate expressions. It might be a bit odd to type but you can chose whatever you like. However, this will solve the conflicts between Twig and Angular.

answered Jun 9, 2015 at 7:29

LordTribual

4,2492 gold badges30 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Med · Accepted Answer · 2015-06-09 07:27:09Z

1

Use temporary javascript variable to store the twig variable

var tmp = "{{ channelName }}";
ng-click="submitPost(tmp)"

answered Jun 9, 2015 at 7:27

Med

2,06322 silver badges32 bronze badges

2 Comments

LordTribual Over a year ago

In my opinion not really clean. If you need to pass many of those twig variables you have a bunch of temporary variables. In contrast of course a redefinition of the $interpolateProvider can be overhead if you only need to pass a few twig variables.

Med Over a year ago

Using temporary vars is a quick fix, but you can still write something like ng-click='submitPost("{{ channelName }}")' ( please notice the quotes and double quotes )

Collectives™ on Stack Overflow

Using Twig variable in AngularsJS

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related