Konflikt AngularJS-Twig z podwójnymi nawiasami klamrowymi

Jak wiadomo, zarówno kątowa, jak i gałązka ma wspólną konstrukcję kontrolną - podwójne nawiasy klamrowe. Jak mogę zmienić domyślną wartość Angular?

Wiem, że mogę to zrobić w Twig, ale w niektórych projektach nie mogę, tylko JS.

Możesz zmienić znaczniki interpolacji początkowej i końcowej za pomocą interpolateProviderusługi. Jednym dogodnym miejscem do tego jest czas inicjalizacji modułu.

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

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

To pytanie wydaje się być odpowiedzią, ale bardziej eleganckim rozwiązaniem, o którym nie wspomniano, jest po prostu zamknięcie nawiasów klamrowych w cudzysłów między gałązkami nawiasów klamrowych, tak:

{{ '{{myModelName}}' }}

Jeśli używasz zmiennej dla zawartości, zrób to zamiast tego:

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

Powinieneś używać pojedynczych cudzysłowów , a nie podwójnych. Podwójne cudzysłowy umożliwiają interpolację ciągów przez Twiga, więc musisz być bardziej ostrożny z zawartością, szczególnie jeśli używasz wyrażeń.

Jeśli nadal nie lubisz oglądać tych nawiasów klamrowych, możesz również utworzyć proste makro w celu zautomatyzowania procesu:

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

Zapisz go jako plik i zaimportuj do swojego szablonu. Używam ngnazwy, ponieważ jest krótka i słodka.

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

Możesz też umieścić makro na górze szablonu i zaimportować je jako _self (patrz tutaj) :

{% import _self as ng %}

Następnie użyj go w następujący sposób:

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

To daje:

{{myModelName}}

... i kontynuacja dla tych, którzy używają MtHaml obok Twig. MtHaml umożliwia korzystanie z loków AngularJS w normalny sposób, ponieważ każdy kod Twig jest dostępny - i = zamiast {{}}. Na przykład:

Zwykły 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 z gałązką w stylu MtHaml:

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

Jak wspomniano w podobnym pytaniu o Django i AngularJS, sztuczka polegająca na zmianie domyślnych symboli (w Twig lub AngularJS) może zapewnić niezgodność z oprogramowaniem innych firm, które będą używać tych symboli. Więc najlepsza rada, którą znalazłem w Google: https://groups.google.com/d/msg/symfony2/kyebufz4M00/8VhF1KWsSAEJ

TwigBundle nie zapewnia konfiguracji ograniczników leksykalnych, ponieważ ich zmiana zabraniałaby używania szablonów udostępnianych przez wspólne pakiety (w tym szablonów wyjątków udostępnianych przez samą TwigBundle).

Możesz jednak użyć surowego znacznika wokół kątowych szablonów, aby uniknąć bólu ucieczki od wszystkich nawiasów klamrowych: http://twig.sensiolabs.org/doc/tags/raw.html - Christophe | Stof

Tag został przemianowany na dosłownie

Możesz także użyć dyrektywy opartej na atrybutach <p ng-bind="yourText"></p>jest taka sama jak<p>{{yourText}}</p>

Możesz użyć tego, \{{product.name}}aby wyrażenie zostało zignorowane przez Kierownicę i zamiast tego użyte przez Angular.

To jest skompilowana wersja najlepszych odpowiedzi i przykład bloków dosłownie:

W przypadku pojedynczych wstawek użyj:

{{ '{{model}}' }}

lub jeśli używasz zmiennej gałązkowej

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

Verbatim , jest bardzo elegancki i czytelny dla kilku zmiennych kątowych:

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

Jeśli nie jesteś zainteresowany zmianą znaczników szablonu istniejącej składni kątowej, co wymagałoby nieco mylącego przepisywania istniejących szablonów kątowych.

Można po prostu użyć tagów szablonów gałązek z tagami kątowymi:

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

Znalazłem to na innym podobnym wątku odpowiedź : angularjs na zastosowaniu Symfony2

Alternatywnie możesz zmienić postacie używane przez Twiga. Jest to kontrolowane przez 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);

Zgodnie z tym postem powinieneś być w stanie to zrobić w następujący sposób:

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

Lubię @pabloRN, ale wolałbym używać span zamiast p, ponieważ dla mnie p doda linię do wyniku.

Użyję tego:

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

Używam również aText z kursorem wewnątrz podwójnego cudzysłowu, więc nie muszę ciągle przepisywać całego tekstu.

Możesz utworzyć funkcję w gałązce, aby otaczać swoje dyrektywy kątowe, tak jak zamiast iść ...

{{"angular"}}

ty idź ...

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