Conflicto AngularJS-Twig con llaves dobles

Como sabe, tanto angular como twig tiene una construcción de control común: llaves dobles. ¿Cómo puedo cambiar el valor predeterminado de Angular?

Sé que puedo hacerlo en Twig, pero en algunos proyectos no puedo, solo JS.

Puede cambiar las tags de interpolación de inicio y final mediante el servicio interpolateProvider . Un lugar conveniente para esto es en el momento de inicialización del módulo.

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

http://docs.angularjs.org/api/ng.$interpolateProvider

Esta pregunta parece respondida, pero una solución más elegante que no se ha mencionado es simplemente encerrar las llaves en comillas entre las llaves, así:

 {{ '{{myModelName}}' }} 

Si está utilizando una variable para los contenidos, haga esto en su lugar:

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

Debe usar comillas simples , no comillas dobles. Las comillas dobles permiten la interpolación de cadenas por Twig, por lo que debe tener más cuidado con los contenidos, especialmente si está utilizando expresiones.


Si todavía odias ver todas esas llaves, también puedes crear una macro simple para automatizar el proceso:

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

Guárdelo como un archivo e impórtelo en su plantilla. Estoy usando ng para el nombre porque es corto y dulce.

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

O puede poner la macro en la parte superior de su plantilla e importarla como _self (vea aquí) :

 {% import _self as ng %} 

Entonces úsalo de la siguiente manera:

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

Esto produce:

 {{myModelName}} 

… y un seguimiento para aquellos que usan MtHaml junto a Twig. MtHaml permite el uso de curles AngularJS de la manera normal porque se accede a cualquier código de Twig, y = en lugar de {{}}. Por ejemplo:

Simple HTML + AngularJS:

   {{ product.name }}   

MtHaml + AngularJS:

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

MtHaml + AngularJS con ramita de estilo MtHaml:

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

Como se menciona en una pregunta similar sobre Django y AngularJS, el truco con el cambio de símbolos predeterminados (en Twig o AngularJS) puede proporcionar incompatibilidad con el software de terceros, que utilizará estos símbolos. Así que el mejor consejo que encontré en google: https://groups.google.com/d/msg/symfony2/kyebufz4M00/8VhF1KWsSAEJ

TwigBundle no proporciona una configuración para los delimitadores lexer, ya que cambiarlos le prohibiría utilizar cualquier plantilla proporcionada por paquetes compartidos (incluidas las plantillas de excepción proporcionadas por TwigBundle).

Sin embargo, puede usar la etiqueta sin formato alrededor de sus plantillas angulares para evitar el dolor de escapar de todas las llaves: http://twig.sensiolabs.org/doc/tags/raw.html – Christophe | Stof

La etiqueta fue renombrada a textualmente

También puede usar la directiva basada en atributos

es lo mismo que

{{yourText}}

Puede usar \{{product.name}} para obtener la expresión ignorada por Handlebars y utilizada por Angular.

Si no está interesado en cambiar las tags de la plantilla de la syntax angular existente que requeriría una reescritura confusa de sus plantillas angulares existentes.

Uno puede usar las tags de la plantilla de la ramita con tags angulares de esta manera:

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

Encontré esto en otra respuesta de hilo similar: Angularjs en una aplicación symfony2

Según esta publicación , deberías poder hacerlo así:

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

Alternativamente, puede cambiar los caracteres utilizados por Twig. Esto es controlado por 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); 

Esta es una versión comstackda de las mejores respuestas y un ejemplo para bloques verbatim:

Para inserciones individuales, use:

 {{ '{{model}}' }} 

o si usas una variable twig

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

Verbatim , es muy elegante y legible para varias variables angulares:

  {% verbatim %}  {% endverbatim %} 
{{user.name}} {{user.age}}

Me gusta @pabloRN, pero preferiría usar span en lugar de p, porque para mí p agregará línea al resultado.

Usaré esto:

  

También uso un texto con el cursor dentro de la comilla doble para no tener que volver a escribir todo una y otra vez.

Puedes crear una función en twig para rodear tus directivas angulares, así que como en lugar de ir …

{{"angular"}}

anda tu …

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

Puedes poner una ‘@’ simple antes de tus expresiones AngularJS, como:

 @{{ app.property }} 

De esta manera, Twig ignorará esta cadena y Angular finalmente puede hacer su trabajo con las expresiones de llaves dobles.