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

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