Conflitto AngularJS-Twig con doppie parentesi graffe


198

Come sapete, sia l'angolazione che il ramoscello hanno una struttura di controllo comune: doppie parentesi graffe. Come posso modificare il valore predefinito di Angular?

So che posso farlo in Twig, ma in alcuni progetti non posso, solo JS.



10
Un'altra soluzione specifica per il ramoscello per la follia dei baffi è usare il verbatimtag; ad es .: {% verbatim %}{{ angular_var }}{% endverbatim %}per preservare i baffi per AngularJS: twig.sensiolabs.org/doc/tags/verbatim.html
Darragh Enright

Non per l'autore della domanda, ma per i lettori futuri: se stai cercando una risposta a questa domanda, considera di evitare il rendering dei modelli sul lato server, se puoi permetterti (se il tuo contenuto principale è all'interno della zona autenticata o il tuo motore di ricerca principale come fonte di traffico è Google (possono analizzare JS SPA)).
OZ_

1
@OZ_ L'argomento del motore di ricerca contro AngularJS e simili diventa abbastanza ridondante quando si utilizzano servizi come prerender.io .
E. Sundin,

Risposte:


287

È possibile modificare i tag di interpolazione iniziale e finale utilizzando il interpolateProviderservizio. Un posto conveniente per questo è al momento dell'inizializzazione del modulo.

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

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


5
Non userei [[]], comunque. Potrebbe essere male in alcuni attacchi, come questo:[[myObject[myArray[index]]
Andrew Joslin

1
Vero. Uso {[{}]}con Django anche se è un po 'strano da scrivere. Ho aggiornato la risposta.
abhaga,

4
Grazie! Si è imbattuto in un problema simile con Jeykll / Liquid e Angular JS. Ho optato per {[e]}.
jfroom,

7
Il punto e virgola non deve essere rimosso dopo il} alla riga 3?
CashIsClay

C'è un modo per farlo a livello globale in angolare? Il nostro sito Web avrà molti, molti moduli su molte pagine diverse e non vogliamo dimenticare di farlo.
theY4Kman

89

Questa domanda sembra avere una risposta, ma una soluzione più elegante che non è stata menzionata è quella di racchiudere semplicemente le parentesi graffe tra virgolette tra le parentesi graffe del ramoscello, in questo modo:

{{ '{{myModelName}}' }}

Se si utilizza una variabile per i contenuti, procedere come segue:

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

Dovresti usare virgolette singole , non doppie. Le virgolette doppie consentono l'interpolazione delle stringhe da parte di Twig, quindi è necessario prestare maggiore attenzione ai contenuti, soprattutto se si utilizzano espressioni.


Se odi ancora vedere tutte quelle parentesi graffe, puoi anche creare una semplice macro per automatizzare il processo:

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

Salvalo come file e importalo nel tuo modello. Sto usando ngper il nome perché è breve e dolce.

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

Oppure puoi mettere la macro nella parte superiore del modello e importarla come _self (vedi qui) :

{% import _self as ng %}

Quindi usalo come segue:

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

Questo produce:

{{myModelName}}

... e un seguito per coloro che usano MtHaml insieme a Twig. MtHaml abilita l'uso dei curlies di AngularJS nel modo normale perché si accede a qualsiasi codice Twig - e = invece di {{}}. Per esempio:

HTML semplice + 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 ramoscello in stile MtHaml:

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

6
Forse non è il modo più piacevole, ma secondo me è l'unico modo per non preoccuparsi dei problemi di compatibilità. Etheretere Angular o Twig {{potrebbe creare problemi di compatibilità o cattiva portabilità.
Léo Benoist,

1
La soluzione fornita ha iniziato a funzionare solo per me quando ho fatto questo {{'{{contact.name}\}'}} che stampa {{contact.name}}come volevo
Timo Huovinen,

37

Come accennato in una domanda simile su Django e AngularJS, il trucco con la modifica dei simboli predefiniti (in Twig o AngularJS) può fornire incompatibilità con software di terze parti, che utilizzerà questi simboli. Quindi il miglior consiglio che ho trovato su Google: https://groups.google.com/d/msg/symfony2/kyebufz4M00/8VhF1KWsSAEJ

TwigBundle non fornisce una configurazione per i delimitatori lexer poiché la loro modifica vi proibirebbe di utilizzare qualsiasi modello fornito da bundle condivisi (compresi i modelli di eccezione forniti da TwigBundle stesso).

Tuttavia, è possibile utilizzare il tag grezzo attorno ai modelli angolari per evitare il dolore di sfuggire a tutte le parentesi graffe: http://twig.sensiolabs.org/doc/tags/raw.html - Christophe | stof

Il tag è stato rinominato alla lettera


6
Si noti che il tag raw è stato rinominato "verbatim" a causa di confusione con il filtro raw del ramoscello.
stedekay

3
Questo è secondo me il modo più pulito.
kemicofa ghost

27

Puoi usare anche la direttiva basata sugli attributi <p ng-bind="yourText"></p>è la stessa di<p>{{yourText}}</p>


4
Questa deve essere effettivamente la soluzione migliore.
Alain Jacomet Forte,

5
come usarlo su attr, come <li id={{item.id}}></li>?
Gkiwi

Ancora meglio sarebbe usare <p data-ng-bind="yourText"></p>per rendere valido l'HTML
Jean-Marc Zimmer

24

È possibile utilizzare \{{product.name}}per ottenere l'espressione ignorata dal manubrio e utilizzata invece da Angular.


Questo è stato davvero utile
aidan

Buona soluzione - semplicemente sfuggire ai personaggi riservati, funziona anche in Manubrio
un darren

22

Questa è una versione compilata delle migliori risposte ed un esempio per blocchi testuali:

Per inserimenti singoli, utilizzare:

{{ '{{model}}' }}

o se usi una variabile ramoscello

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

Verbatim , è molto elegante e leggibile per diverse variabili angolari:

<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, questo mi ha salvato la vita. Non ho potuto usare {{param}} all'interno di Filter: {{{param}}: $ select.search} e la tua soluzione l'ha risolto. Grazie
balron,

19

Se non sei interessato a modificare i tag modello della sintassi angolare esistente che richiederebbe una riscrittura confusa dei modelli angolari esistenti.

Si possono semplicemente usare i tag modello ramoscello con tag angolari in questo modo:

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

Trovato questo su un'altra risposta thread simile : Angularjs su un'applicazione symfony2


1
@ThomasReggi L'OP chiede una soluzione per Twig. Scopri le altre risposte che possono funzionare anche con Liquid.
Noel Llevares, il

18

In alternativa puoi cambiare i personaggi usati da Twig. Questo è controllato da 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);

Molto utile. Grazie.
Anos K. Mhazo,

17

Secondo questo post dovresti essere in grado di farlo in questo modo:

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

2
dove devo mettere questi codici? | Oh! Ho capito, devo creare ng-app = app
zx1986

Appena iniziato con AngularJS e all'interno di Laravel 4 ho caricato il framework e quindi aggiunto {{2 + 2}} alla vista - nient'altro e valutato a 4. Dove devo inserire il codice per cambiarlo in [[2+ 2]]? Ho provato ad aggiungerlo tra i tag di script nella stessa pagina e l'aggiunta di ng-app = "myApp" al tag div contenente ma non funziona.
Perkin5,

Deve essere inserito nel tuo javascript, sono definiti gli stessi controller di posto. Per un esempio funzionante, guarda la documentazione ( docs.angularjs.org/api/ng.$interpolateProvider ) nella scheda script.js.
Olivier.Roger,

2
Un avvertimento, stavo usando le parentesi quadre doppie per Angular, ma ho riscontrato un problema con il framework dei messaggi Django. Messaggi crea un cookie che contiene [[]] e Angular tenta di analizzarlo e soffoca nel processo. Ho provato a passare alla memoria di sessione per i messaggi, ma lo stesso problema. Sono passato a parentesi quadre triple.
Dustin,

2

Mi piace @pabloRN, ma preferirei usare span invece di p, perché per me p aggiungerà una linea al risultato.

Userò questo:

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

Uso anche un testo con il cursore all'interno della doppia virgoletta, quindi non devo riscrivere il tutto ancora e ancora.


effettivamente ng-bind = "" è ciò che conta, puoi usare qualsiasi tag che ti piace :)
wesamly,

@wesamly Puoi usare qualsiasi tag, ma <span>viene usato per il testo incorporato quando hai altri contenuti. Ad esempio:<h1>Welcome <span ng-bind="yourName"></span></h1>
rybo111,

1

È possibile creare una funzione in ramoscello per circondare le direttive angolari, quindi come invece di andare ...

{{"angular"}}

tu vai ...

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


Si prega di bloccare il codice utente per lo snippet di codice nelle risposte.
β.εηοιτ.βε
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.