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

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