AngularJS-Twig가 더블컬리브레이트와 경합합니다.

AngularJS-Twig가 더블컬리브레이트와 경합합니다.

아시다시피 angular와 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할 수 있습니다(여기를 참조).

{% import _self as ng %}

다음으로 다음과 같이 사용합니다.

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

출력은 다음과 같습니다.

{{myModelName}}

---

트위그와 함께 MtHaml을 사용하는 사람들에 대한 후속 조치입니다.MtHaml은 Angular를 사용할 수 있습니다.모든 Twig 코드가 {{ }}이(가) 아닌 - 및 =를 통해 액세스되므로 JS는 정상 방식으로 컬링됩니다.예를 들어 다음과 같습니다.

플레인 HTML + 앵귤러JS:

<tr ng-repeat="product in products">
   <td> {{ product.name }} </td>
</tr>

MtHaml + 각도JS:

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

MtHaml + 각도MtHaml 스타일의 Twig를 사용하는 JS:

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

Django 및 AngularJS에 대한 유사한 질문에서 언급되었듯이 기본 기호 변경으로 트릭합니다(Twig 또는 Angular).JS)는 이러한 기호를 사용하는 타사 소프트웨어와의 호환성을 제공할 수 있습니다.그래서 구글에서 찾은 최고의 조언은 https://groups.google.com/d/msg/symfony2/kyebufz4M00/8VhF1KWsSAEJ입니다.

TwigBundle에서는 렉서 구분자를 변경할 경우 공유 번들에 의해 제공되는 템플릿(TwigBundle 자체에서 제공되는 예외 템플릿 포함)을 사용할 수 없기 때문에 렉서 구분자에 대한 설정은 제공되지 않습니다.

단, 모서리 템플릿 주위에 raw 태그를 사용하여 모든 곱슬곱슬한 괄호에서 벗어날 수 있습니다.http://twig.sensiolabs.org/doc/tags/raw.html -- Christophe | Stof

태그의 이름이 글자 그대로 변경되었습니다.

디렉티브는 Atribute-based 디렉티브도 할 수 .<p ng-bind="yourText"></p> is is is is is와 <p>{{yourText}}</p>

하시면 됩니다.\{{product.name}}핸들 바에 의해 무시되고 대신 Angular에 의해 사용되는 식을 얻습니다.

다음은 베스트 답변의 컴파일 버전과 말 그대로의 블록의 예입니다.

단일 삽입의 경우 다음을 사용합니다.

{{ '{{model}}' }}

또는 twig 변수를 사용하는 경우

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

기존 각도 구문의 템플릿 태그를 변경하는 데 관심이 없는 경우 기존 각도 템플릿을 다시 작성해야 합니다.

다음과 같이 각 태그가 있는 twig 템플릿 태그를 사용할 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/13671701/angularjs-twig-conflict-with-double-curly-braces