이중 중괄호와 AngularJS-Twig 충돌

아시다시피, 각도와 나뭇 가지에는 공통 제어 구조가 있습니다-이중 중괄호. Angular의 기본값을 어떻게 변경합니까?

나는 나뭇 가지에서 할 수 있다는 것을 알고 있지만 일부 프로젝트에서는 JS 만 할 수 없습니다.

interpolateProviderservice를 사용하여 시작 및 끝 보간 태그를 변경할 수 있습니다 . 이를위한 편리한 장소 중 하나는 모듈 초기화 시간입니다.

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

... Twig와 함께 MtHaml 을 사용하는 사람들을위한 후속 조치 . MtHaml을 사용하면 {{}} 대신-및 =를 통해 Twig 코드에 액세스하므로 일반적인 방식으로 AngularJS curly를 사용할 수 있습니다. 예를 들면 다음과 같습니다.

일반 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 스타일 나뭇 가지가있는 MtHaml + AngularJS :

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

Django 및 AngularJS에 대한 비슷한 질문에서 언급했듯이 기본 기호를 변경하는 트릭 (Twig 또는 AngularJS에서)은 타사 소프트웨어와 호환되지 않아 이러한 기호를 사용합니다. 내가 구글에서 찾은 가장 좋은 조언 : https://groups.google.com/d/msg/symfony2/kyebufz4M00/8VhF1KWsSAEJ

TwigBundle은 공유 번들에서 제공하는 템플릿 (TwigBundle 자체에서 제공하는 예외 템플릿 포함)을 사용하는 것을 금지하므로 렉서 구분 기호에 대한 구성을 제공하지 않습니다.

그러나 모든 중괄호를 이탈하는 고통을 피하기 위해 각도 템플릿 주위에 raw 태그를 사용할 수 있습니다. http://twig.sensiolabs.org/doc/tags/raw.html-Christophe | 스토 프

태그가 그대로 이름이 변경되었습니다.

당신은 속성 기반의 지시도 사용할 수 <p ng-bind="yourText"></p>와 동일합니다<p>{{yourText}}</p>

\{{product.name}}Handlebars에서 식을 무시하고 대신 Angular에서 사용하는 식을 얻는 데 사용할 수 있습니다 .

이것은 최고의 답변의 컴파일 된 버전이며 동사 블록의 예입니다.

단일 삽입의 경우 다음을 사용하십시오.

{{ '{{model}}' }}

또는 작은 가지 변수를 사용하는 경우

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

Verbatim 은 여러 각도 변수에 대해 매우 우아하고 읽을 수 있습니다.

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

다른 비슷한 스레드 답변 에서 이것을 발견했습니다 : symfony2 응용 프로그램의 Angularjs

또는 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을 좋아하지만 p 대신 결과에 줄을 추가하기 때문에 p 대신 span을 사용하는 것이 좋습니다.

나는 이것을 사용할 것이다 :

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

또한 큰 따옴표 안에 커서와 함께 aText를 사용하므로 모든 것을 반복해서 다시 쓸 필요가 없습니다.

가령 대신 각도 지시문을 둘러싸 기 위해 나뭇 가지로 함수를 만들 수 있습니다 ...

{{"angular"}}

너가 ...

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