AngularJS-Twig conflict with double curly braces

Question

As you know, both angular and twig has common control construction - double curly braces. How can I change default value of Angular?

I know that I can do it in Twig,

Answer 1

You can change the start and end interpolation tags using interpolateProvider service. One convenient place for this is at the module initialization time.

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

https://docs.angularjs.org/api/ng/provider/$interpolateProvider

Answer 2

This question appears answered, but a more elegant solution that hasn't been mentioned is to simply enclose the curly braces in quote marks between the twig curly braces, like so:

{{ '{{myModelName}}' }}

If you are using a variable for the contents, do this instead:

{{ '{{' ~ yourvariable ~ '}}' }}

You should use single quotes, not double quotes. Double quotes enable string interpolation by Twig so you have to be more careful with the contents, especially if you are using expressions.

---

If you still hate seeing all those curly braces, you can also create a simple macro to automate the process:

{% macro curly(contents) %}
   {{ '{{' ~ contents ~ '}}' }}
{% endmacro %}

Save it as a file and import it into your template. I am using ng for the name because it is short and sweet.

{% import "forms.html" as ng %}

Or you can put the macro at the top of your template and import it as _self (see here):

{% import _self as ng %}

Then use it as follows:

{{ ng.curly('myModelName') }}

This outputs:

{{myModelName}}

---

...and a follow up for those that use MtHaml alongside Twig. MtHaml enables the use of AngularJS curlies in the normal manner because any Twig code is accessed though - and = instead of {{ }}. For example:

Plain HTML + AngularJS:

<tr ng-repeat="product in products">
   <td> {{ product.name }} </td>
</tr>

MtHaml + AngularJS:

%tr(ng-repeat="product in products")
   %td {{ product.name }}

MtHaml + AngularJS with MtHaml-style Twig:

- set twigVariable = "somevalue"
= twigVariable
%tr(ng-repeat="product in products")
   %td {{ product.name }}

Answer 3

Alternatively you can change the characters used by Twig. This is controlled by the Twig_Lexer.

$twig = new Twig_Environment();

$lexer = new Twig_Lexer($twig, array(
    'tag_comment'   => array('[#', '#]'),
    'tag_block'     => array('[%', '%]'),
    'tag_variable'  => array('[[', ']]'),
    'interpolation' => array('#[', ']'),
));
$twig->setLexer($lexer);

Answer 4

According to this post you should be able to do it like this :

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

Answer 5

You can use too the attribute-based directive <p ng-bind="yourText"></p> is the same as <p>{{yourText}}</p>