CODEWITHSUNDEEP
angularjstwig
Meliborn
Meliborn

Reputation: 6645

AngularJS-Twig conflict with double curly braces

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, but in some projects I can't, only JS.

Upvotes: 197

Views: 85654

Answers (11)

abhaga
abhaga

Reputation: 5455

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

Upvotes: 288

marcinzajkowski
marcinzajkowski

Reputation: 301

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")}}

Upvotes: 1

user680786
user680786

Reputation:

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

Upvotes: 37

Guilherme Viebig
Guilherme Viebig

Reputation: 6932

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>

Upvotes: 23

sifoo
sifoo

Reputation: 799

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.

Upvotes: 2

Arnold Daniels
Arnold Daniels

Reputation: 16553

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);

Upvotes: 18

Nacho Coloma
Nacho Coloma

Reputation: 7318

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

Upvotes: 23

robert.corlett
robert.corlett

Reputation: 911

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 }}

Upvotes: 91

chrisl-921fb74d
chrisl-921fb74d

Reputation: 23100

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

Upvotes: 18

pabloRN
pabloRN

Reputation: 906

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

Upvotes: 27

Olivier.Roger
Olivier.Roger

Reputation: 4249

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

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

Upvotes: 17

Related Questions