AngularJS-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 _self as ng %}

จากนั้นใช้ดังต่อไปนี้:

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

ผลลัพธ์นี้:

{{myModelName}}

... และติดตามผู้ที่ใช้MtHamlควบคู่ไปกับ Twig MtHaml เปิดใช้งานการใช้ AngularJS curlies ในลักษณะปกติเนื่องจากมีการเข้าถึงรหัส Twig ใด ๆ - และ = แทน {{}} ตัวอย่างเช่น:

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 พร้อมทวิกสไตล์ MtHaml:

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

ดังที่กล่าวไว้ในคำถามที่คล้ายกันเกี่ยวกับ Django และ AngularJS การหลอกลวงด้วยการเปลี่ยนสัญลักษณ์เริ่มต้น (ใน Twig หรือ AngularJS) สามารถให้ความไม่ลงรอยกันกับซอฟต์แวร์ของบุคคลที่สามซึ่งจะใช้สัญลักษณ์เหล่านี้ คำแนะนำที่ดีที่สุดที่ฉันพบใน google: https://groups.google.com/d/msg/symfony2/kyebufz4M00/8VhF1KWsSAEJ

TwigBundle ไม่ได้จัดเตรียมการกำหนดค่าสำหรับตัวคั่น lexer เนื่องจากการเปลี่ยนแปลงจะห้ามคุณใช้เทมเพลตใด ๆ ที่จัดทำโดยบันเดิลที่แชร์ (รวมถึงเทมเพลตข้อยกเว้นที่ TwigBundle จัดหาให้เอง)

อย่างไรก็ตามคุณสามารถใช้แท็ก raw รอบ ๆ เทมเพลตเชิงมุมของคุณเพื่อหลีกเลี่ยงความเจ็บปวดจากการหลีกเลี่ยงวงเล็บปีกกาทั้งหมด: http://twig.sensiolabs.org/doc/tags/raw.html - Christophe | Stof

แท็กถูกเปลี่ยนชื่อเป็นคำต่อคำ

คุณสามารถใช้คำสั่งที่อิงตาม<p ng-bind="yourText"></p>คุณสมบัติได้เช่นกัน<p>{{yourText}}</p>

คุณสามารถใช้\{{product.name}}เพื่อรับนิพจน์ที่ละเว้นโดย Handlebars และใช้โดย Angular แทน

นี่เป็นรุ่นรวบรวมของคำตอบที่ดีที่สุดและตัวอย่างสำหรับบล็อกคำต่อคำ:

สำหรับการแทรกครั้งเดียวให้ใช้:

{{ '{{model}}' }}

หรือถ้าคุณใช้ตัวแปรทวิก

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

หากคุณไม่สนใจที่จะเปลี่ยนแท็กแม่แบบของไวยากรณ์เชิงมุมที่มีอยู่ซึ่งจะต้องมีการเขียนเทมเพลตเชิงมุมที่มีความสับสน

หนึ่งสามารถใช้แท็กเทมเพลตกิ่งกับแท็กเชิงมุมเช่น:

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

พบสิ่งนี้ในคำตอบเธรดอื่นที่คล้ายกัน: Angularjs บนแอปพลิเคชัน symfony2

หรือคุณสามารถเปลี่ยนอักขระที่ใช้โดยทวิก นี้จะถูกควบคุมโดย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 แต่ฉันต้องการใช้ span แทน p เพราะสำหรับฉัน p จะเพิ่มบรรทัดลงในผลลัพธ์

ฉันจะใช้สิ่งนี้:

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

ฉันยังใช้ aText กับเคอร์เซอร์ภายในเครื่องหมายคำพูดคู่ดังนั้นฉันไม่จำเป็นต้องเขียนทุกสิ่งซ้ำแล้วซ้ำอีก

คุณสามารถสร้างฟังก์ชั่นในกิ่งไม้เพื่อล้อมรอบคำสั่งเชิงมุมของคุณเช่นแทนที่จะไป ...

{{"angular"}}

คุณไป ...

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