reactivos - AngularJS-Twig conflicto con llaves dobles

tablas angular 4

Question

Como ustedes saben, tanto la estructura angular como la ramita tienen una construcción de control común: dobles tirantes. ¿Cómo puedo cambiar el valor por defecto de Angular?

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

Answer 1

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

Como se mencionó en una pregunta similar sobre Django y AngularJS, el truco con el cambio de los símbolos predeterminados (en Twig o AngularJS) puede proporcionar incompatibilidad con el software de terceros, que utilizará estos símbolos. 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 de lexer, ya que cambiarlos le prohibirá utilizar cualquier plantilla proporcionada por paquetes compartidos (incluidas las plantillas de excepción proporcionadas por el propio TwigBundle).

Sin embargo, puede usar la etiqueta en bruto alrededor de sus plantillas angulares para evitar el dolor de escapar de todos los frenos: http://twig.sensiolabs.org/doc/tags/raw.html - Christophe | Stof

La etiqueta fue retitulada a twig.sensiolabs.org/doc/tags/verbatim.html

Answer 3

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

twig.sensiolabs.org/doc/tags/verbatim.html , 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>

Answer 4

Esta pregunta parece respondida, 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 los contenidos, haga esto en su lugar:

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

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

Si aún 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 colocar la macro en la parte superior de su plantilla e importarla como _self (ver aquí) :

{% import _self as ng %}

Entonces utilízalo como sigue:

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

Esto produce:

{{myModelName}}

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

HTML plano + 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 una ramita de estilo MtHaml:

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

Answer 5

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 un texto con el cursor dentro de la comilla doble para no tener que reescribir todo una y otra vez.

Answer 6

Puede cambiar las etiquetas de interpolación inicial y final utilizando 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

Answer 7

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

Answer 8

Puedes crear una función en ramita para rodear tus directivas angulares, así que en lugar de ir ...

{{"angular"}}

anda tu ...

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

Answer 9

Puedes simplemente poner una ''@'' antes de tus expresiones de AngularJS, como:

@{{ app.property }}

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

Answer 10

Según este post deberías poder hacerlo así:

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

Answer 11

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

Solo se pueden usar las etiquetas de plantilla de ramita con etiquetas angulares como:

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

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

Answer 12

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