angularjs - way - ng untouched angular 2




AngularJS-Twig in conflitto con doppie parentesi graffe (8)

È possibile modificare i tag di interpolazione di inizio e fine utilizzando il servizio interpolateProvider . Un posto conveniente per questo è il tempo di inizializzazione del modulo.

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

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

Come sapete, sia l'angolare 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.


Come menzionato in una domanda simile su Django e AngularJS, il trucco con la modifica dei simboli predefiniti (in Twig o AngularJS) può fornire l'incompatibilità con il 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 del lexer in quanto la loro modifica impedirebbe all'utente di utilizzare qualsiasi modello fornito da pacchetti condivisi (inclusi i modelli di eccezioni 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

Tag è stato rinominato in twig.sensiolabs.org/doc/tags/verbatim.html


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

Userò questo:

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

Uso anche aText con il cursore all'interno della virgoletta doppia, quindi non devo riscrivere l'intera cosa più e più volte.


Puoi creare una funzione in ramoscello per circondare le tue direttive angolari, così come invece di andare ...

{{"angular"}}

tu vai ...

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


Puoi usare \{{product.name}} per ottenere l'espressione ignorata da Handlebars e utilizzata da Angular.


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


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

{{ '{{myModelName}}' }}

Se stai usando una variabile per i contenuti, fallo invece:

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

Dovresti usare le virgolette singole , non le doppie virgolette. Le doppie virgolette abilitano l'interpolazione delle stringhe da parte di Twig, quindi è necessario essere più attenti con i contenuti, specialmente se si utilizzano le espressioni.

Se continui a odiare 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 ng per il nome perché è breve e dolce.

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

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

{% import _self as ng %}

Quindi utilizzalo come segue:

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

Questo produce:

{{myModelName}}

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

Plain HTML + 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 Twig in stile MtHaml:

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

Se non sei interessato a cambiare i tag del template della sintassi angolare esistente che richiederebbe una riscrittura confusa dei tuoi modelli angolari esistenti.

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

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

Trovato su un'altra answer thread simile: Angularjs su un'applicazione symfony2





twig