AngularJS-Twig en conflicto con llaves dobles

Como saben, tanto angular como la ramita tienen 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 etiquetas de interpolación de inicio y fin utilizando el interpolateProviderservicio. Un lugar conveniente para esto es en el momento de inicialización del módulo.

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

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

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

{{ '{{myModelName}}' }}

Si está utilizando una variable para el contenido, 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 el contenido, 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 a su plantilla. Estoy usando ngel nombre porque es corto y dulce.

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

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

{% import _self as ng %}

Luego ú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 curvas AngularJS de la manera normal porque se accede a cualquier código Twig - y = en lugar de {{}}. Por ejemplo:

HTML sin formato + 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 con ramita de estilo MtHaml:

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

Como se mencionó en una pregunta similar sobre Django y AngularJS, el truco para cambiar los 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 usar plantillas proporcionadas 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 literalmente

También puede usar la directiva basada en atributos <p ng-bind="yourText"></p>es la misma que<p>{{yourText}}</p>

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

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

Para inserciones individuales, use:

{{ '{{model}}' }}

o si usas una variable ramita

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

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

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

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

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

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

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

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

De acuerdo con esta publicación , deberías poder hacerlo así:

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

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

Usaré esto:

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

También uso aText con el cursor dentro de la comilla doble para no tener que reescribir todo una y otra vez.

Puede crear una función en rama para rodear sus directivas angulares, así que en lugar de ir ...

{{"angular"}}

anda tu ...

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