twigでAngularJSの区切り文字を使う方法

AngularJSのインターポレーションを使う方法

AngularJSのインターポレーションがtwigテンプレートのdelimiterと被ってしまっているので、その対策方法です。
インターポレーションとかdelimiterとか、スッと入ってこない単語が多いですが、変数値をレンダリングするときに使う区切り文字が同じなので困りましたね、の対策です。

記法

twigの場合：

example.twig

<span>{{ twig_variable }}</span>

AngularJSの場合：

example.angular.html

<span>{{angularjs_variable}}</span>

どちらも中括弧'{}'を2個連続させて画面に表示します。

対策①：TwigでAngularJSの区切り文字毎レンダリングする

Twigテンプレートで以下のように記述することで、TwigとAngularJSの両方で同じ区切り文字を使用することができます。

template.html.twig

<span>{{ '{{angularjs_variable}}' }}

出力結果：

template.html

<span>{{angularjs_variable}}</span>

echo('{{angularjs_variable}}'); と同等なので、これで基本的には問題ないと思います。

対策②：AngularJSの区切り文字を変更する

AngularJSの区切り文字を変更してしまう方法です。
モジュール宣言後にconfigを編集できるため比較的容易だと思います。
が、一括で変更できないので、モジュールごとに変更しないといけないと思われます。

変更方法：

Angular.js

var testApp = angular.module('testApp', []);

testApp.config(function($interpolateProvider){
    $interpolateProvider.startSymbol('//').endSymbol('//');
});

example.angular.html

<span>//angularjs_variable//</span>

これで、AngularJSの区切り文字がダブルスラッシュになりました。
例ではダブルスラッシュに変更していますが、https://などが合った場合にどういう挙動するかまで検証していないので{[{などのほうが良いと思われます。

ぶっちゃけ対策①がベストアンサーやな、って思ってるんで、詳しく検証しなかったです。

結論

対策①のほうが、余計なことしないのでいいと思いました。