AngularJS-Twig konflik dengan kawat gigi keriting ganda

Seperti yang Anda ketahui, sudut dan ranting memiliki konstruksi kontrol yang sama - kawat gigi keriting ganda. Bagaimana saya bisa mengubah nilai default Angular?

Saya tahu saya bisa melakukannya di Twig, tetapi di beberapa proyek saya tidak bisa, hanya JS.

Anda dapat mengubah tag interpolasi mulai dan berakhir menggunakan interpolateProviderlayanan. Satu tempat yang nyaman untuk ini adalah pada saat inisialisasi modul.

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

https://docs.angularjs.org/api/ng/provider/$interpolateProvider

Pertanyaan ini muncul dijawab, tetapi solusi yang lebih elegan yang belum disebutkan adalah dengan hanya melampirkan kurung kurawal di tanda kutip antara kurung kurawal, seperti:

{{ '{{myModelName}}' }}

Jika Anda menggunakan variabel untuk konten, lakukan ini sebagai gantinya:

{{ '{{' ~ yourvariable ~ '}}' }}

Anda harus menggunakan tanda kutip tunggal , bukan tanda kutip ganda. Kutipan ganda memungkinkan interpolasi string oleh Twig sehingga Anda harus lebih berhati-hati dengan konten, terutama jika Anda menggunakan ekspresi.

Jika Anda masih benci melihat semua kurung kurawal itu, Anda juga dapat membuat makro sederhana untuk mengotomatiskan proses:

{% macro curly(contents) %}
   {{ '{{' ~ contents ~ '}}' }}
{% endmacro %}

Simpan sebagai file dan impor ke template Anda. Saya menggunakan ngnama itu karena pendek dan manis.

{% import "forms.html" as ng %}

Atau Anda dapat meletakkan makro di bagian atas template Anda dan mengimpornya sebagai _self (lihat di sini) :

{% import _self as ng %}

Kemudian gunakan sebagai berikut:

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

Output ini:

{{myModelName}}

... dan tindak lanjut bagi mereka yang menggunakan MtHaml bersama Twig. MtHaml memungkinkan penggunaan curlies AngularJS dengan cara biasa karena kode Ranting apa pun diakses - dan = alih-alih {{}}. Sebagai contoh:

HTML Biasa + 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 dengan Twig gaya MtHaml:

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

Seperti disebutkan dalam pertanyaan serupa tentang Django dan AngularJS, trik dengan mengubah simbol default (dalam Twig atau AngularJS) dapat memberikan ketidakcocokan dengan perangkat lunak pihak ketiga, yang akan menggunakan simbol-simbol ini. Jadi saran terbaik yang saya temukan di google: https://groups.google.com/d/msg/symfony2/kyebufz4M00/8VhF1KWsSAEJ

TwigBundle tidak menyediakan konfigurasi untuk pembatas lexer karena mengubahnya akan melarang Anda untuk menggunakan template yang disediakan oleh bundel bersama (termasuk template pengecualian yang disediakan oleh TwigBundle sendiri).

Namun, Anda dapat menggunakan tag mentah di sekitar templat bersudut Anda untuk menghindari rasa sakit karena melepaskan semua kurung kurawal: http://twig.sensiolabs.org/doc/tags/raw.html - Christophe | Stof

Tag diubah namanya menjadi kata demi kata

Anda juga dapat menggunakan arahan berbasis atribut <p ng-bind="yourText"></p>sama dengan<p>{{yourText}}</p>

Anda dapat menggunakan \{{product.name}}untuk membuat ekspresi diabaikan oleh Setang dan digunakan oleh Angular sebagai gantinya.

Ini adalah versi kompilasi dari jawaban terbaik dan contoh untuk blok kata demi kata:

Untuk insersi tunggal, gunakan:

{{ '{{model}}' }}

atau jika Anda menggunakan variabel ranting

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

Verbatim , sangat elegan dan mudah dibaca untuk beberapa variabel sudut:

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

Jika Anda tidak tertarik untuk mengubah tag template dari sintaks sudut yang ada yang akan memerlukan beberapa penulisan ulang yang membingungkan dari template sudut yang ada.

Satu cukup menggunakan tag ranting template dengan tag sudut seperti:

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

Menemukan ini pada jawaban utas yang serupa : Angular pada aplikasi symfony2

Atau Anda dapat mengubah karakter yang digunakan oleh Twig. Ini dikendalikan oleh 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);

Menurut posting ini Anda harus dapat melakukannya seperti ini:

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

Saya suka @pabloRN, tapi saya lebih suka menggunakan span daripada p, karena bagi saya p akan menambahkan baris ke hasilnya.

Saya akan menggunakan ini:

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

Saya juga menggunakan Teks dengan kursor di dalam tanda kutip ganda sehingga saya tidak perlu menulis ulang semuanya berulang kali.

Anda dapat membuat fungsi dalam ranting untuk mengelilingi arahan sudut Anda, jadi seperti bukannya ...

{{"angular"}}

kamu pergi ...

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