AngularJS-Twig konflik dengan kawat gigi keriting ganda


198

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.



10
Solusi ranting khusus lainnya untuk kegilaan kumis adalah dengan menggunakan verbatimtag; misalnya: {% verbatim %}{{ angular_var }}{% endverbatim %}untuk menjaga kumis Anda untuk AngularJS: twig.sensiolabs.org/doc/tags/verbatim.html
Darragh Enright

Bukan untuk penulis pertanyaan, tetapi pembaca masa depan: jika Anda mencari jawaban untuk pertanyaan ini, pertimbangkan untuk menghindari template yang dirender di sisi server sama sekali, jika Anda mampu membelinya (jika konten utama Anda berada di dalam zona terautentikasi atau Anda mesin pencari utama sebagai sumber lalu lintas adalah Google (mereka dapat menguraikan JS SPA)).
OZ_

1
@OZ_ Argumen mesin pencari terhadap AngularJS dan sejenisnya menjadi sangat berlebihan ketika menggunakan layanan seperti prerender.io .
E. Sundin

Jawaban:


287

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


5
Saya tidak akan menggunakan [[]]. Bisa jadi buruk di beberapa binding, seperti ini:[[myObject[myArray[index]]
Andrew Joslin

1
Benar. Saya menggunakan {[{}]}Django meskipun agak aneh untuk mengetik. Saya telah memperbarui jawabannya.
abhaga

4
Terima kasih! Mengalami masalah serupa dengan Jeykll / Liquid dan Angular JS. Saya memilih {[dan]}.
jfroom

7
Bukankah titik koma perlu dihapus setelah} pada baris 3?
CashIsClay

Apakah ada cara untuk melakukan ini di tingkat global di Angular? Situs web kami akan memiliki banyak, banyak modul di banyak halaman berbeda, dan kami tidak ingin lupa untuk melakukan ini.
theY4Kman

89

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

6
Ini mungkin bukan cara yang paling menyenangkan, tapi menurut saya itu satu-satunya cara untuk tidak khawatir tentang masalah kompatibilitas. Ether memodifikasi Angular atau Twig {{dapat membuat masalah kompatibilitas atau portabilitas yang buruk.
Léo Benoist

1
Solusi yang diberikan hanya mulai bekerja untuk saya ketika saya melakukan ini {{'{{contact.name}\}'}} yang mencetak {{contact.name}}seperti yang saya inginkan
Timo Huovinen

37

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


6
Harap perhatikan bahwa tag mentah telah diubah namanya menjadi "kata demi kata" karena untuk menghindari kebingungan dengan filter mentah ranting.
stedekay

3
Ini menurut saya cara terbersih.
hantu kemicofa

27

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


4
Ini harus menjadi solusi yang lebih baik sebenarnya.
Alain Jacomet Forte

5
cara menggunakannya di attr, suka <li id={{item.id}}></li>?
gkiwi

Bahkan lebih baik akan menggunakan <p data-ng-bind="yourText"></p>untuk membuat HTML valid
Jean-Marc Zimmer

24

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


Ini sangat berguna
aidan

Solusi bagus - cukup melarikan diri dari karakter yang dipesan, juga berfungsi di Handlebars
a darren

22

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>

Ah, ini adalah penyelamat bagi saya. Saya tidak bisa menggunakan {{param}} di dalam Filter: {{{param}}: $ select.search} dan solusi Anda memperbaikinya. Terima kasih
balron

19

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


1
@ThomasReggi OP meminta solusi untuk Twig. Lihat jawaban lain yang juga bisa digunakan untuk Liquid.
Noel Llevares

18

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

Sangat membantu. Terima kasih.
Anos K. Mhazo

17

Menurut posting ini Anda harus dapat melakukannya seperti ini:

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

2
di mana saya harus meletakkan kode-kode ini? | oh! Saya mengerti, saya harus membuat ng-app = app
zx1986

Baru mulai dengan AngularJS dan dalam Laravel 4 saya memuat kerangka kerja dan kemudian menambahkan {{2 + 2}} ke tampilan - tidak ada yang lain dan dievaluasi menjadi 4. Di mana saya meletakkan kode untuk mengubahnya ke [[2+ 2]]? Saya sudah mencoba menambahkannya di antara tag skrip pada halaman yang sama dan menambahkan ng-app = "myApp" ke tag div yang berisi tetapi tidak berhasil.
Perkin5

Itu harus ditempatkan di javascript Anda, pengendali tempat yang sama didefinisikan. Untuk contoh yang berfungsi, lihat dokumentasi ( docs.angularjs.org/api/ng.$interpolateProvider ) di tab script.js.
Olivier.Roger

2
Sebagai peringatan, saya menggunakan tanda kurung ganda untuk Angular, tapi saya hanya mengalami masalah dengan kerangka kerja Pesan Django. Pesan membuat cookie yang berisi [[]] dan Angular mencoba menguraikannya dan tersedak dalam proses. Saya sudah mencoba beralih ke penyimpanan sesi untuk pesan, tetapi masalah yang sama. Saya beralih ke kurung tiga kotak.
Dustin

2

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.


sebenarnya ng-bind = "" adalah yang penting, Anda dapat menggunakan tag apa pun yang Anda suka :)
wesamly

@wesamly Anda dapat menggunakan tag apa pun, tetapi <span>digunakan untuk teks sebaris saat Anda memiliki konten lain. Misalnya:<h1>Welcome <span ng-bind="yourName"></span></h1>
rybo111

1

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


Silakan blok kode pengguna untuk potongan kode dalam jawaban Anda.
β.εηοιτ.βε
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.