Conflitto AngularJS-Twig con doppie parentesi graffe

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.

È 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

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

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

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

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

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>

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

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);

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

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

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.

È 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")}}