Conflit AngularJS-Twig avec double accolades

Comme vous le savez, à la fois angulaire et brindille a une construction de contrôle commune - double croisillons. 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 JS.

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

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

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

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

{{ '{{myModelName}}' }}

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

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

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

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

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

Enregistrez-le en tant que fichier et importez-le dans votre modèle. J'utilise ngle nom car il est court et doux.

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

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

{% import _self as ng %}

Ensuite, utilisez-le comme suit:

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

Cela produit:

{{myModelName}}

... et un suivi pour ceux qui utilisent MtHaml aux côtés de Twig. MtHaml permet d'utiliser les boucles AngularJS de la manière normale car tout code Twig est accessible via - 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 brindille de style MtHaml:

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

Comme mentionné dans une question similaire sur Django et AngularJS, une astuce avec la modification des symboles par défaut (dans Twig ou AngularJS) peut entraîner une incompatibilité avec un logiciel tiers, qui utilisera 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 les modifier vous interdirait d'utiliser des modèles fournis par des bundles partagés (y compris les modèles d'exception fournis par TwigBundle lui-même).

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

La balise a été renommée textuellement

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

Vous pouvez utiliser \{{product.name}}pour obtenir l'expression ignorée par les guidons et utilisée à la place par Angular.

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 pour plusieurs variables angulaires:

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

Si vous n'êtes pas intéressé à modifier les balises de modèle de la syntaxe angulaire existante, ce qui nécessiterait une réécriture confuse de vos modèles angulaires existants.

On peut simplement utiliser les balises de modèle de brindille avec des balises angulaires comme ceci:

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

Trouvé ceci sur une autre réponse de thread similaire : Angularjs sur une application symfony2

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

Selon ce post, vous devriez pouvoir le faire comme ceci:

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

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 également aText avec le curseur à l'intérieur des guillemets doubles, je n'ai donc pas à réécrire le tout encore et encore.

Vous pouvez créer une fonction en brindille pour entourer vos directives angulaires, donc comme au lieu d'aller ...

{{"angular"}}

tu vas ...

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