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

This is a compiled version of the best answers and a example for verbatim blocks:

For single insertions, use:

{{ '{{model}}' }}

or if you use a twig variable

{{ '{{' ~ twigVariableWitModelName ~ '}}' }}

Verbatim, is very elegant and readable for several angular variables:

<table ng-table>
    {% verbatim %}
        <tr ng-repeat="user in $data">
        <td data-title="'Name'">{{user.name}}</td>
        <td data-title="'Age'">{{user.age}}</td>
        </tr>
    {% endverbatim %}
</table>

Answer 2

You can create a function in twig to surround your angular directives, so like instead of going ...

{{"angular"}}

you go ...

{{angular_parser("angular stuff here output curlies around it")}}

Answer 3

I like @pabloRN, but I would prefer to use span instead of p, because for me p will add line to the result.

I will use this:

<span ng-bind="yourName"></span>

I also use aText with the cursor inside the double quote so I don't have to rewrite the whole thing over and over again.

Answer 4

You can use \{{product.name}} to get the expression ignored by Handlebars and used by Angular instead.

Answer 5

As mentioned in similar question about Django and AngularJS, trick with changing default symbols (in Twig or AngularJS) can provide incompatibility with third-party software, which will use these symbols. So best advice I found in google: https://groups.google.com/d/msg/symfony2/kyebufz4M00/8VhF1KWsSAEJ

TwigBundle does not provide a configuration for the lexer delimiters as changing them would forbid you to use any templates provided by shared bundles (including the exception templates provided by TwigBundle itself).

However, you could use the raw tag around your angular templates to avoid the pain of escaping all curly braces: http://twig.sensiolabs.org/doc/tags/raw.html -- Christophe | Stof

Tag was renamed to verbatim

Answer 6

If you're not interested in changing the template tags of the existing angular syntax which would require some confusing rewriting of your existing angular templates.

One can just use the twig template tags with angular tags like so:

{% verbatim %}{{yourName}}{% endverbatim %}

Found this on another similar thread answer: Angularjs on a symfony2 application