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 ~ '}}' }}

Ви повинні використовувати одинарні лапки , а не подвійні лапки. Подвійні лапки дозволяють Twpo Interpolation 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 з гілочкою у стилі 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 | Стоф

Тег перейменовано на дослівний

Ви також можете використовувати директиву на основі атрибутів - <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>

Я також використовую aText з курсором всередині подвійної лапки, тому мені не доведеться переписувати все це знову і знову.

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

{{"angular"}}

ти йдеш ...

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