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

Как известно, как угловая, так и веточка имеют общую конструкцию управления - двойные фигурные скобки. Как я могу изменить значение по умолчанию Angular?

Я знаю, что могу сделать это в Twig, но в некоторых проектах я не могу, только в JS.

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

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

https://docs.angularjs.org/api/ng/provider/$interpolateProvider

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

{{ '{{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 curlies обычным способом, потому что любой код 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 с веточкой в ​​стиле MtHaml:

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

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

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

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

Тег был переименован в дословно

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

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

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

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

{{ '{{model}}' }}

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

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

Дословно , очень элегантно и читабельно для нескольких угловых переменных:

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

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

Можно просто использовать теги шаблона ветки с угловыми тегами, например, так:

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

Нашел этот ответ в другой похожей ветке : Angularjs в приложении symfony2

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

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

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

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

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

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

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

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

{{"angular"}}

ты иди ...

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