web-dev-qa-db-fra.com

Conflit AngularJS-Twig avec doubles accolades

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

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

angularjstwig
197
Meliborn

Vous pouvez modifier les balises d'interpolation de début et de fin à l'aide du service interpolateProvider. Un endroit pratique pour cela est au moment de l’initialisation du module.

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

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

286
abhaga

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

{{ '{{myModelName}}' }}

Si vous utilisez une variable pour le contenu, procédez comme suit:

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

Vous devez utiliser guillemets simples , pas de guillemets doubles. Les guillemets doubles permettent l'interpolation de chaîne par Twig. Vous devez donc être plus prudent avec le contenu, en particulier si vous utilisez des expressions.

Si vous n'aimez toujours pas voir toutes ces accolades, vous pouvez également créer une macro simple pour automatiser le processus:

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

Enregistrez-le sous forme de fichier et importez-le dans votre modèle. J'utilise ng pour le nom parce qu'il est court et sympathique.

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

Ou vous pouvez placer la macro en haut de votre modèle et l'importer en tant que _self (voir ici) :

{% import _self as ng %}

Puis utilisez-le comme suit:

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

Cela génère:

{{myModelName}}

... et un suivi pour ceux qui utilisent MtHaml aux côtés de Twig. MtHaml permet l’utilisation normale des curlies AngularJS car on accède à tout code Twig - et = au lieu de {{}}. Par exemple:

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

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

Comme mentionné dans une question similaire sur Django et AngularJS, modifier les symboles par défaut (dans Twig ou AngularJS) peut entraîner des problèmes de compatibilité avec les logiciels tiers qui utiliseront ces symboles. Donc, 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 leur modification vous empêcherait d'utiliser les modèles fournis par les bundles partagés (y compris les modèles d'exception fournis par TwigBundle lui-même).

Toutefois, vous pouvez utiliser la balise raw autour de vos modèles angular pour éviter la douleur de sortir de toutes les accolades: http://twig.sensiolabs.org/doc/tags/raw.html - Christophe | Stof

La balise a été renommée en mot à mot

35
OZ_

Vous pouvez également utiliser la directive basée sur les attributs <p ng-bind="yourText"></p> est identique à <p>{{yourText}}</p>

27
pabloRN

Vous pouvez utiliser \{{product.name}} pour obtenir l'expression ignorée par le guidon et utilisée par Angular.

23
Nacho Coloma

Ceci est une version compilée des meilleures réponses et un exemple pour les blocs textuels:

Pour les insertions simples, utilisez:

{{ '{{model}}' }}

ou si vous utilisez une variable twig

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

Verbatim , est très élégant et lisible par plusieurs angular variables:

<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>
19
Guilherme Viebig

Si vous n'êtes pas intéressé par la modification des balises de modèle de la syntaxe angular existante, cela nécessiterait une réécriture déroutante de vos modèles angular existants.

On peut simplement utiliser les balises de template twig avec les balises angular comme ceci:

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

Trouvé ceci sur un autre fil similaire réponse : Angularjs sur une application symfony2

18
chrisjlee

Alternativement, vous pouvez changer les caractères utilisés par Twig. Ceci est contrôlé par le 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);
17
Jasny - Arnold Daniels

Selon ce post vous devriez pouvoir le faire comme ceci:

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

J'aime @pabloRN, mais je préférerais utiliser span au lieu de p, car pour moi p ajoutera une ligne au résultat.

Je vais utiliser ceci:

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

J'utilise aussi aText avec le curseur à l'intérieur de la citation double pour ne pas avoir à réécrire tout le texte encore et encore.

2
sifoo

Vous pouvez créer une fonction dans twig pour entourer vos directives angular, donc plutôt au lieu d'aller ...

{{"angular"}}

tu vas ...

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

0
marcinzajkowski