twig et angular

twig utilise des marquerus en double accolade, angular aussi dans ses templates.
SI on veut éviter de se marcher sur les pieds et de voir ses instructions de template angular mangées par celles de twig (car évaluées avant que le js n’y ait accès), il existe deux méthodes courantes:
entourer les instructions angular de balise twig « verbatim » afin qu’elles ne soient pas interprêtées, ce qui rallonge considérablement le code des templates en plus d’être assez laid. 

{% verbatim %}
    {{ monExpressionAngular }}
{% verbatim %}

ou bien on peut changer les marqueurs d’expressions angular dans la config de notre app. Par example, utiliser des double parenthèses. mon clavier azerty préfère, car cela évite de faire deux boutons pour un caractère. Pour cela, dans l’instanciation de votre app angular, dans la config, mettez le service $interpolateProvider et définissez lui ses symboles de début et de fin comme ceci:

(function () {

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

})();

Ainsi vous aurez la possibilité de faire vos expressions angular dans twig avec des double parenthèses. (Sans oublier de définir ng-app et ng-controller dans votre template)

    (( monExpressionAngular ))

Si vous aimez ce que nous faisons à Cipher Bliss, vous pouvez nous soutenir de plusieurs façons: en faisant un micro don sur liberapay , ou en cryptomonnaies. Le plus simple nous pour nous faire connaître étant de partager cet article.
Suivez moi sur Mastodon @tykayn@mastodon.cipherbliss.com.
Ce site restera libre comme un gnou dans la nature et sans pubs, parce qu'on vous aime. Que la source soit avec vous!

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.