Как использовать Angular.js и Twig без конфликта двойных фигурных скобок

Twig и Angular.js используют одни и те же символы для управления структурой рендеринга: {{ а также }} , что не хорошо для тех, кто использует Twig в качестве движка шаблонов по умолчанию.

Хотя, могут быть разработчики, у которых нет этой проблемы, и они будут думать: зачем использовать шаблон рендеринга бэкэнда, если вы должны делать это с angular, и почему эта проблема возникает?

Сама проблема в том, что переменная или инструкция Twig, которые будут напечатаны, всегда будут обрабатываться, а {{ или же }} без обработки Twig, и это в основном, когда ошибки появляются из-за угловых. Если вы начинаете писать только угловые в файл Twig:

{#
Note that {{x}} is not Twig but AngularJS
#}
{{label}}
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.label = "Hello world";
});

Twig будет анализировать эти символы не как угловые (обычный HTML), а как Twig, поэтому сообщение об ошибке таково, что label переменная не существует.

К счастью, есть много способов решить эту проблему.

Возможные решения с Twig

Самый надежный способ решить эту проблему, это сделать с помощью Twig Way, так как есть много вариантов, которые вы можете использовать.

Изменить символы рендеринга

Twig позволяет настраивать синтаксис для разделителей блоков. Не рекомендуется использовать эту функцию, так как шаблоны будут связаны с вашим пользовательским синтаксисом. Но для конкретных проектов может иметь смысл изменить значения по умолчанию. Чтобы изменить разделители блоков, вам нужно создать свой собственный объект лексера:

 array('[#', '#]'),
'tag_block'     => array('[%', '%]'),
'tag_variable'  => array('[[', ']]'),
'interpolation' => array('#[', ']'),
));
$twig->setLexer($lexer);

Однако, если вы измените разделители лексеров ({{ а также }}) не рекомендуется, потому что изменение их запретит вам использовать любые шаблоны, предоставляемые общими пакетами (включая шаблоны исключений, предоставленные самим TwigBundle) и сторонние библиотеки Twig. Подробнее о Лексере читайте здесь.

Предотвратить веточку от обработки блока

Дословный тег помечает разделы как необработанный текст, который не должен анализироваться. Этот тег удобен, так как вам не нужно изменять свой угловой стиль работы, т.е.

{#
If you don't use verbatim in the following line
Twig will crash as "x" doesn't exists.
To solve it wrap in a verbatim tag.
#}
{% verbatim %}
{{x}}
{% endverbatim %}
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [
"Alfreds Futterkiste",
"Berglunds snabbköp",
"Centro comercial Moctezuma",
"Ernst Handel",
]
});

Замечания: в старых версиях ветки это тег назван raw но был переименован, чтобы избежать путаницы с raw фильтр.

Вы можете увидеть вербальный тег, работающий в следующей скрипке:

Напишите свой угловой шаблон в виде строки

Просто вложите свой угловой шаблон в строку веточки.

{{'{{x}}'}}
{#
The output will be :
{{x}}
#}
{# Or mix with twig variables #}
{%set aTwigVariable = "x" %}
{{'{{' ~ aTwigVariable ~ '}}'}}
{#
The output will be :
{{x}}
#}

Хотя это и изменяет способ кодирования, это решение очень простое, но функциональное.

Предупреждение: ты должен использовать одинарные кавычки, не двойные кавычки. Двойные кавычки включают строковую интерполяцию Twig, поэтому вы должны быть более осторожны с содержимым, особенно если вы используете выражения.

Создайте функцию Twig, которая автоматически добавляет символы

Вместо того, чтобы писать фигурные скобки самостоятельно, создайте функцию Twig, которая сделает это за вас, таким образом фигурные скобки не будут обрабатываться для Twig.

В зависимости от того, как вы используете Twig, вы можете прочитать документацию Symfony или официальную документацию Twig.

В основном функция будет выглядеть так:

И зарегистрируйте его в своем классе расширения:

Замечания: очевидно, не может быть более простым. Вы можете добавить больше вещей вместо символов, если они уже добавлены.

Наконец, используйте его в веточку:

{{angularParse('x')}}
{#
The output will be :
{{x}}
#}

Возможные решения с Angular

В отличие от ветки, у angular нет более 1 варианта решения вашей проблемы.

Изменить символы рендеринга

Angular позволяет изменить способ рендеринга угловых переменных в представлении, меняя поставщика интерполяции.

Хотя эта функция иногда используется для смешивания разных языков разметки, например, обернуть шаблон Angular в шаблон Python Jinja (или любой другой язык шаблонов, например Twig). Смешивание шаблонных языков очень опасно. Язык шаблона встраивания не будет безопасно избегать угловых выражений, поэтому любые контролируемые пользователем значения в шаблоне вызовут ошибки безопасности Cross Site Scripting (XSS).

Чтобы изменить поставщиков интерполяции, используйте следующий фрагмент:

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

Узнайте больше о interpolateProvider в документации Angular здесь.

Если вы знаете другой способ использования Angular и Twig одновременно, пожалуйста, поделитесь им с сообществом в поле для комментариев.

Повеселись