Conflit AngularJS-Twig avec les accolades doubles

Question

Comme vous le savez, angular et twig ont tous deux une construction de contrôle commune - les doubles accolades. Comment puis-je changer la valeur par défaut d'Angular ?

Je sais que je peux le faire dans Twig, mais dans certains projets je ne peux pas, seulement en JS.

Answer 1

Vous pouvez changer les balises d'interpolation de début et de fin en utilisant interpolateProvider service. Un endroit pratique pour cela est le moment de l'initialisation du module.

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

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

Answer 2

Cette question semble avoir trouvé une réponse, mais une solution plus élégante, qui n'a pas été mentionnée, consiste à placer les accolades entre guillemets entre les accolades brins, comme suit :

{{ '{{myModelName}}' }}

Si vous utilisez une variable pour le contenu, faites ceci à la place :

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

Vous devez utiliser guillemets simples et non des guillemets. Les guillemets doubles permettent l'interpolation des chaînes de caractères par Twig. Vous devez donc faire plus attention à leur contenu, surtout si vous utilisez des expressions.

---

Si vous détestez toujours voir toutes ces accolades, vous pouvez aussi créer une simple macro pour automatiser le processus :

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

Enregistrez-le comme un fichier et importez-le dans votre modèle. J'utilise ng pour le nom parce qu'il est court et doux.

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

Vous pouvez également placer la macro en haut de votre modèle et l'importer en tant que _self. (voir ici) :

{% import _self as ng %}

Utilisez-le ensuite comme suit :

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

Ces sorties :

{{myModelName}}

---

...et un suivi pour ceux qui utilisent MtHaml à côté de Twig. MtHaml permet d'utiliser les boucles AngularJS de manière normale, car tout code Twig est accessible par - et = au lieu de {{ }}. Par exemple :

HTML simple + 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 avec Twig de style MtHaml :

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

Answer 3

Comme mentionné dans une question similaire sur Django et AngularJS, la modification des symboles par défaut (dans Twig ou AngularJS) peut entraîner une incompatibilité avec les logiciels tiers qui utilisent ces symboles. Le meilleur conseil que j'ai trouvé dans Google : https://groups.google.com/d/msg/symfony2/kyebufz4M00/8VhF1KWsSAEJ

TwigBundle ne fournit pas de configuration pour les délimiteurs de lexer. car les modifier vous interdirait d'utiliser tous les modèles fournis par les bundles partagés (y compris les modèles d'exception fournis par TwigBundle lui-même).

Cependant, vous pouvez utiliser la balise raw autour de vos templates angulaires pour pour éviter d'avoir à échapper à toutes les accolades : http://twig.sensiolabs.org/doc/tags/raw.html -- Christophe | Stof

Le tag a été renommé en in extenso

Answer 4

Vous pouvez également utiliser la directive basée sur les attributs <p ng-bind="yourText"></p> est la même chose que <p>{{yourText}}</p>

Answer 5

Vous pouvez utiliser \{{product.name}} pour que l'expression soit ignorée par Handlebars et utilisée par Angular à la place.