Конфликт AngularJS-Twig с двойными фигурными фигурными скобками

Ответ 1

Вы можете изменить теги интерполяции начала и конца с помощью службы interpolateProvider. Одним удобным местом для этого является время инициализации модуля.

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

http://docs.angularjs.org/api/ng.$interpolateProvider

Ответ 2

На этот вопрос появляется ответ, но более элегантное решение, о котором не упоминалось, состоит в том, чтобы просто заключить фигурные фигурные скобки в кавычки между фигурными фигурными скобками, например:

{{ '{{myModelName}}' }}

Если вы используете переменную для содержимого, сделайте это вместо этого:

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

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

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

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

Сохраните его как файл и импортируйте в свой шаблон. Я использую ng для имени, потому что он короткий и сладкий.

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

Или вы можете поместить макрос в начало вашего шаблона и импортировать его как _self (см. здесь):

{% import _self as ng %}

Затем используйте его следующим образом:

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

Выводится:

{{myModelName}}

... и последующие действия для тех, кто использует MtHaml вместе с Twig. MtHaml позволяет использовать завитки AngularJS в нормальном режиме, потому что любой код Twig доступен, хотя и = вместо {{}}. Например:

Обычный HTML + 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 с Twig-мейл-стиле:

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

Ответ 3

Как упоминалось в аналогичном вопросе о Django и AngularJS, трюк с изменением символов по умолчанию (в Twig или AngularJS) может обеспечить несовместимость с сторонним программным обеспечением, которое будет использовать эти символы. Поэтому лучший совет, который я нашел в google: https://groups.google.com/d/msg/symfony2/kyebufz4M00/8VhF1KWsSAEJ

TwigBundle не предоставляет конфигурацию для разделителей лексера поскольку их изменение запретит вам использовать любые шаблоны, предоставленные общих пулов (включая шаблоны исключений, предоставленные TwigBundle).

Однако вы можете использовать тег raw вокруг ваших шаблонов angular для избегайте боли, которая ускользает от всех фигурных скобок: http://twig.sensiolabs.org/doc/tags/raw.html- Кристоф | Stof

был переименован в verbatim

Ответ 4

Вы также можете использовать директиву, основанную на атрибутах <p ng-bind="yourText"></p>, это то же самое, что и <p>{{yourText}}</p>

Ответ 5

Вы можете использовать \{{product.name}}, чтобы получить выражение, игнорируемое Handlebars и используемое Angular.

Ответ 6

В соответствии с этим сообщением вы должны сделать это следующим образом:

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

Ответ 7

Если вы не заинтересованы в изменении тегов шаблонов существующего синтаксиса angular, который потребует некоторой запутанной перезаписи существующих шаблонов angular.

Можно просто использовать теги шаблонов twig с тегами angular:

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

Обнаружено это в другом подобном потоке answer: Angularjs в приложении symfony2

Ответ 8

В качестве альтернативы вы можете изменить символы, используемые Twig. Это контролируется 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);

Ответ 9

Это скомпилированная версия лучших ответов и пример для стенографических блоков:

Для одиночных вставок используйте:

{{ '{{model}}' }}

или если вы используете переменную twig

{{ '{{' ~ twigVariableWitModelName ~ '}}' }}

Verbatim, очень изящна и читаема для нескольких переменных angular:

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

Ответ 10

Мне нравится @pabloRN, но я бы предпочел использовать span вместо p, потому что для меня p добавит строку к результату.

Я буду использовать это:

<span ng-bind="yourName"></span>

Я также использую aText с курсором внутри двойной кавычки, поэтому мне не нужно переписывать все это снова и снова.

Ответ 11

Вы можете создать функцию в ветке, чтобы окружить ваши директивы angular, поэтому вместо того, чтобы идти...

{{"angular"}}

вы идете...

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

Ответ 12

Вы можете просто поставить "@" перед выражениями AngularJS, например:

@{{ app.property }}

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