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

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")}}