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('}]}'); });
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 %} {{user.name}} {{user.age}} {% endverbatim %}
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.