AngularJS-Twig em conflito com chaves duplas


198

Como você sabe, tanto o angular quanto o galho têm construção de controle comum - chaves duplas. Como posso alterar o valor padrão de Angular?

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



10
Outra solução específica para galhos de loucura de bigode é usar a verbatimtag; por exemplo: {% verbatim %}{{ angular_var }}{% endverbatim %}para preservar seus bigodes para AngularJS: twig.sensiolabs.org/doc/tags/verbatim.html
Darragh Enright

Não para o autor da pergunta, mas para os futuros leitores: se você estiver procurando resposta para essa pergunta, evite a renderização de modelos no lado do servidor, se puder pagar (se o seu conteúdo principal estiver dentro da zona autenticada ou o seu principal mecanismo de pesquisa) como fonte de tráfego é o Google (eles podem analisar JS SPA)).
OZ_

1
@OZ_ O argumento do mecanismo de pesquisa em relação ao AngularJS e similares se torna bastante redundante ao usar serviços como prerender.io .
E. Sundin 24/02

Respostas:


287

Você pode alterar as tags de interpolação inicial e final usando o interpolateProviderserviço. Um local conveniente para isso é no momento da inicialização do módulo.

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

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


5
Eu não usaria [[]], no entanto. Pode ser ruim em algumas ligações, como esta:[[myObject[myArray[index]]
Andrew Joslin

1
Verdade. Eu uso {[{}]}com o Django, embora seja um pouco estranho digitar. Eu atualizei a resposta.
Abhaga

4
Obrigado! Ocorreu um problema semelhante com o Jeykll / Liquid e o Angular JS. Eu optei por {[e]}.
jfroom

7
O ponto e vírgula não precisa ser removido após o} na linha 3?
CashIsClay

Existe alguma maneira de fazer isso em nível global no Angular? Nosso site terá muitos, muitos módulos em muitas páginas diferentes, e não queremos esquecer disso.
theY4Kman

89

Essa pergunta parece respondida, mas uma solução mais elegante que não foi mencionada é simplesmente colocar os chavetas entre aspas entre as chaves, assim:

{{ '{{myModelName}}' }}

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

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

Você deve usar aspas simples , não aspas duplas. As aspas duplas ativam a interpolação de string pelo Twig, portanto, você deve ter mais cuidado com o conteúdo, especialmente se estiver usando expressões.


Se você ainda detesta ver todas essas chaves, também pode 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. Estou usando ngo nome porque é curto e doce.

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

Ou você pode colocar a macro na parte superior do seu modelo 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. O MtHaml permite o uso de curvas de AngularJS da maneira normal, porque qualquer código Twig é acessado - e = em vez de {{}}. Por exemplo:

HTML simples + 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 com o galho no estilo MtHaml:

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

6
Talvez não seja a maneira mais agradável, mas, na minha opinião, é a única maneira de não se preocupar com o problema de compatibilidade. O Ether modifica Angular ou Twig {{pode criar problemas de compatibilidade ou portabilidade ruim.
Léo Benoist

1
A solução só forneceu começou a trabalhar para mim quando eu fiz isso {{'{{contact.name}\}'}} que imprime {{contact.name}}como eu queria
Timo Huovinen

37

Como mencionado na pergunta semelhante sobre Django e AngularJS, o truque para alterar símbolos padrão (no 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 do lexer, pois sua alteração proibiria o uso de 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 escapar de todos os chavetas: http://twig.sensiolabs.org/doc/tags/raw.html - Christophe | Stof

A tag foi renomeada para literalmente


6
Observe que a tag não processada foi renomeada para "literalmente" devido a evitar confusão com o filtro não processado do twig.
stedekay

3
Este é, na minha opinião, o caminho mais limpo.
Kemicofa ghost # 12/15

27

Você também pode usar a diretiva baseada em atributo <p ng-bind="yourText"></p>é a mesma que<p>{{yourText}}</p>


4
Essa deve ser a melhor solução, na verdade.
Alain Jacomet Forte

5
como usá-lo no attr, como <li id={{item.id}}></li>?
gkiwi

Ainda melhor seria usar <p data-ng-bind="yourText"></p>para tornar o HTML válida
Jean-Marc Zimmer

24

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


Este foi realmente útil
Aidan

Boa solução - simplesmente escape dos caracteres reservados, também funciona no guidão
a partir de

22

Esta é uma versão compilada das melhores respostas e um exemplo para blocos textuais:

Para inserções únicas, use:

{{ '{{model}}' }}

ou se você usar uma variável galho

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

Verbatim , é muito elegante e legível para várias variáveis ​​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>

Ah, esse foi o salva-vidas para mim. Não pude usar {{param}} dentro do Filtro: {{{param}}: $ select.search} e sua solução o corrigiu. Graças
balron

19

Se você não estiver interessado em alterar as tags de modelo da sintaxe angular existente, isso exigiria alguma reescrita confusa dos seus modelos angulares existentes.

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

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

Encontrei isso em outra resposta semelhante : Angularjs em um aplicativo symfony2


1
@ThomasReggi O OP está pedindo uma solução para o Twig. Confira as outras respostas que também podem funcionar para o Liquid.
Noel Llevares

18

Como alternativa, 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);

Muito útil. Obrigado.
Anos K. Mhazo

17

De acordo com este post, você poderá fazer o seguinte:

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

2
onde devo colocar esses códigos? | ah! Eu entendi, eu tenho que fazer ng-app = app
zx1986

Iniciando com o AngularJS e no Laravel 4, carreguei a estrutura e adicionei {{2 + 2}} à exibição - nada mais e ele foi avaliado como 4. Onde coloco o código para alterar isso para [[2+ 2]]? Tentei adicioná-lo entre as tags de script na mesma página e adicionar ng-app = "myApp" à tag div que contém, mas não funciona.
precisa saber é o seguinte

Ele precisa ser colocado no seu javascript, os mesmos controladores de local são definidos. Para um exemplo de trabalho, consulte a documentação ( docs.angularjs.org/api/ng.$interpolateProvider ) na guia script.js.
precisa saber é o seguinte

2
Uma palavra de cautela, eu estava usando os colchetes duplos para Angular, mas acabei encontrando um problema com o framework Django Message. As mensagens criam um cookie que contém [[]] e o Angular tenta analisá-lo e engasga no processo. Eu tentei mudar para o armazenamento da sessão para mensagens, mas o mesmo problema. Troquei para colchetes triplos.
Dustin

2

Eu gosto do @pabloRN, mas eu preferiria usar span em vez de p, porque para mim, p adiciona linha ao resultado.

Vou usar isso:

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

Também uso aText com o cursor entre aspas duplas, para não precisar reescrever a coisa toda repetidamente.


realmente ng-bind = "" é o que importa, você pode usar qualquer tag você gosta :)
wesamly

@wesamly Você pode usar qualquer tag, mas <span>é usado para texto embutido quando tiver outro conteúdo. Por exemplo:<h1>Welcome <span ng-bind="yourName"></span></h1>
rybo111 11/11

1

Você pode criar uma função em galho para cercar suas diretivas angulares, assim como ao invés de ir ...

{{"angular"}}

Você vai ...

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


O código do usuário bloqueia o snippet de código em suas respostas.
β.εηοιτ.βε
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.