이중 중괄호와 AngularJS-Twig 충돌

이중 중괄호와 AngularJS-Twig 충돌

---

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

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

---

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

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

http://docs.angularjs.org/api/ng.$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 자체에서 제공하는 예외 템플릿 포함)을 사용하는 것을 금지하므로 렉서 구분 기호에 대한 구성을 제공하지 않습니다.

그러나 모든 중괄호를 이탈하는 고통을 피하기 위해 각도 템플릿 주위에 원시 태그를 사용할 수 있습니다. 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

---

Alternatively you can change the characters used by Twig. This is controlled by the 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);

---

According to this post you should be able to do it like this :

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

---

I like @pabloRN, but I would prefer to use span instead of p, because for me p will add line to the result.

I will use this:

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

I also use aText with the cursor inside the double quote so I don't have to rewrite the whole thing over and over again.

---

You can create a function in twig to surround your angular directives, so like instead of going ...

{{"angular"}}

you go ...

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

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