AngularJS-Twig conflito com chaves duplas

Como você sabe, angular e twig tem construção de controle comum – chaves duplas. Como posso alterar o valor padrão do Angular?

Eu sei que posso fazer isso no Twig, mas em alguns projetos eu não posso, apenas JS.

Você pode alterar as tags de interpolação de início e fim usando o serviço interpolateProvider . Um local conveniente para isso é no momento da boot do módulo.

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

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

Esta questão parece ser respondida, mas uma solução mais elegante que não foi mencionada é simplesmente colocar as chaves entre aspas entre as chaves, assim:

 {{ '{{myModelName}}' }} 

Se você estiver usando uma variável para o conteúdo, faça isso:

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

Você deve usar aspas simples , não aspas duplas. Aspas duplas permitem a interpolação de strings por Twig, então você precisa ter mais cuidado com o conteúdo, especialmente se estiver usando expressões.


Se você ainda detesta ver todas essas chaves, também é possível criar uma macro simples para automatizar o processo:

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

Salve-o como um arquivo e importe-o para o seu modelo. Eu estou usando ng para o nome porque é curto e doce.

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

Ou você pode colocar a macro no topo do seu template e importá-la como _self (veja aqui) :

 {% import _self as ng %} 

Em seguida, use-o da seguinte maneira:

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

Isso gera:

 {{myModelName}} 

… e um acompanhamento para aqueles que usam MtHaml ao lado de Twig. MtHaml permite o uso de curlies AngularJS da maneira normal, porque qualquer código Twig é acessado – e = em vez de {{}}. Por exemplo:

HTML simples + AngularJS:

   {{ product.name }}   

MtHaml + AngularJS:

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

MtHaml + AngularJS com twig em estilo MtHaml:

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

Como mencionado em questões semelhantes sobre Django e AngularJS, o truque com a mudança de símbolos padrão (em Twig ou AngularJS) pode fornecer incompatibilidade com software de terceiros, que usará esses símbolos. Então, o melhor conselho que encontrei no google: https://groups.google.com/d/msg/symfony2/kyebufz4M00/8VhF1KWsSAEJ

O TwigBundle não fornece uma configuração para os delimitadores de léxico, já que alterá-los proibiria o uso de quaisquer modelos fornecidos por pacotes compartilhados (incluindo os modelos de exceção fornecidos pelo próprio TwigBundle).

No entanto, você pode usar a tag raw em torno de seus modelos angulares para evitar a dor de escaping de todas as chaves: http://twig.sensiolabs.org/doc/tags/raw.html – Christophe | Stof

A tag foi renomeada para textual

Você também pode usar a diretiva baseada em atributos

é a mesma que

{{yourText}}

Você pode usar \{{product.name}} para obter a expressão ignorada pelo Handlebars e usada pelo Angular.

Se você não estiver interessado em alterar as tags de modelo da syntax angular existente, isso exigiria uma reconfiguração confusa de seus modelos angulares existentes.

Pode-se usar apenas as tags de modelo de twig com tags angulares da seguinte forma:

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

Encontrei isso em outra resposta de discussão semelhante: Angularjs em um aplicativo symfony2

De acordo com este post, você deve ser capaz de fazer assim:

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

Alternativamente, você pode alterar os caracteres usados ​​pelo Twig. Isso é controlado pelo 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 é uma versão compilada das melhores respostas e um exemplo para blocos verbatim:

Para inserções únicas, use:

 {{ '{{model}}' }} 

ou se você usar uma variável de twig

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

Verbatim , é muito elegante e legível para várias variables ​​angulares:

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

Eu gosto de @pabloRN, mas eu preferiria usar span ao invés de p, porque para mim p irá adicionar linha ao resultado.

Eu vou usar isso:

  

Eu também uso aText com o cursor dentro da aspa dupla, então não tenho que rewrite a coisa toda vez após vez.

Você pode criar uma function no twig para cercar suas diretivas angulares, assim como em vez de ir …

{{"angular"}}

Você vai …

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

Você pode colocar um ‘@’ antes das expressões do AngularJS, como:

 @{{ app.property }} 

Desta forma, o Twig irá ignorar esta string e Angular pode finalmente fazer o seu trabalho com as expressões de chaves duplas.