AngularJS dengan Django - Tag templat yang bertentangan

Saya ingin menggunakan AngularJS dengan Django namun keduanya digunakan {{ }}sebagai tag templat. Apakah ada cara mudah untuk mengubah salah satu dari keduanya untuk menggunakan tag templating khusus lainnya?

Untuk Angular 1.0 Anda harus menggunakan apis $ interpolateProvider untuk mengkonfigurasi simbol interpolasi: http://docs.angularjs.org/api/ng.$interpolateProvider .

Sesuatu seperti ini harus melakukan trik:

myModule.config(function($interpolateProvider) {
  $interpolateProvider.startSymbol('{[{');
  $interpolateProvider.endSymbol('}]}');
});

Ingatlah dua hal:

• mencampur templat sisi server dan sisi klien jarang merupakan ide yang baik dan harus digunakan dengan hati-hati. Masalah utama adalah: rawatan (sulit dibaca) dan keamanan (interpolasi ganda dapat mengekspos vektor keamanan baru - misalnya, sementara melarikan diri dari sisi server dan sisi klien yang aman sendiri mungkin aman, kombinasi mereka mungkin tidak).
• jika Anda mulai menggunakan arahan pihak ketiga (komponen) yang digunakan {{ }}dalam template mereka maka konfigurasi Anda akan merusaknya. ( perbaiki tertunda )

Meskipun tidak ada yang dapat kita lakukan tentang masalah pertama, kecuali untuk memperingatkan orang, kita perlu mengatasi masalah kedua.

Anda mungkin dapat mencoba tag template Django kata demi kata dan menggunakannya seperti ini:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

{% verbatim %}
<div ng-app="">
    <p>10 is {{ 5 + 5 }}</p>
</div>
{% endverbatim %}

Jika Anda melakukan pemisahan bagian halaman dengan benar maka Anda dapat dengan mudah menggunakan tag angularjs dalam lingkup tag "mentah".

Dalam jinja2

{% raw %}
    // here you can write angularjs template tags.
{% endraw %}

Dalam template Django (di atas 1,5)

{% verbatim %}    
    // here you can write angularjs template tags.
{% endverbatim %}

Kami membuat filter yang sangat sederhana di Django 'ng' yang membuatnya mudah untuk mencampur keduanya:

foo.html:

...
<div>
  {{ django_context_var }}
  {{ 'angularScopeVar' | ng }}
  {{ 'angularScopeFunction()' | ng }}
</div>
...

The ngFilter terlihat seperti ini:

from django import template
from django.utils import safestring

register = template.Library()


@register.filter(name='ng')
def Angularify(value):
  return safestring.mark_safe('{{%s}}' % value)

Jadi saya mendapat bantuan besar di saluran IRC Angular hari ini. Ternyata Anda dapat mengubah tag templat Angular dengan sangat mudah. Cuplikan yang diperlukan di bawah ini harus dimasukkan setelah sudut Anda dimasukkan (contoh yang diberikan muncul di milis mereka dan akan digunakan (())sebagai tag templat baru, sebagai pengganti milik Anda sendiri):

angular.markup('(())', function(text, textNode, parentElement){
  if (parentElement[0].nodeName.toLowerCase() == 'script') return;
  text = text.replace(/\(\(/g,'{{').replace(/\)\)/g, '}}');
  textNode.text(text);
  return angular.markup('{{}}').call(this, text, textNode, parentElement);
});

angular.attrMarkup('(())', function(value, name, element){
    value = value.replace(/\(\(/g,'{{').replace(/\)\)/, '}}');
    element[0].setAttribute(name, value);
    return angular.attrMarkup('{{}}').call(this, value, name, element);
});

Juga, saya diarahkan ke perangkat tambahan mendatang yang akan mengekspos startSymboldan endSymbolproperti yang dapat diatur ke tag apa pun yang Anda inginkan.

Saya memilih menentang menggunakan tanda kurung ganda (()) sebagai tag templat. Ini dapat bekerja dengan baik selama tidak ada panggilan fungsi yang terlibat tetapi ketika mencoba yang berikut ini

ng:disabled=(($invalidWidgets.visible()))

dengan Firefox (10.0.2) di Mac Saya mendapatkan kesalahan yang sangat panjang, bukan logika yang dimaksud. <[]> berjalan dengan baik untuk saya, setidaknya sampai sekarang.

Edit 2012-03-29: Harap perhatikan bahwa $ invalidWidgets sudah tidak digunakan lagi. Namun saya masih menggunakan pembungkus lain dari kawat gigi ganda. Untuk versi bersudut lebih tinggi dari 0.10.7 (saya kira) Anda dapat mengubah pembungkus lebih mudah dalam definisi aplikasi / modul Anda:

angular.module('YourAppName', [], function ($interpolateProvider) {
    $interpolateProvider.startSymbol('<[');
    $interpolateProvider.endSymbol(']>');
}); 

API API .

Saya menemukan kode di bawah ini bermanfaat. Saya menemukan kode di sini: http://djangosnippets.org/snippets/2787/

"""
filename: angularjs.py

Usage:
    {% ng Some.angular.scope.content %}

e.g.
    {% load angularjs %}
    <div ng-init="yourName = 'foobar'">
        <p>{% ng yourName %}</p>
    </div>
"""

from django import template

register = template.Library()

class AngularJS(template.Node):
    def __init__(self, bits):
        self.ng = bits

    def render(self, ctx):
        return "{{%s}}" % " ".join(self.ng[1:])

def do_angular(parser, token):
    bits = token.split_contents()
    return AngularJS(bits)

register.tag('ng', do_angular)

Anda selalu dapat menggunakan ng-bind alih-alih {{}} http://docs.angularjs.org/api/ng/directive/ngBind

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

Jika Anda menggunakan Django 1.5 dan penggunaan yang lebih baru:

  {% verbatim %}
    {{if dying}}Still alive.{{/if}}
  {% endverbatim %}

Jika Anda terjebak dengan Django 1.2 di appengine memperpanjang sintaks Django dengan perintah template verbatim seperti ini ...

from django import template

register = template.Library()

class VerbatimNode(template.Node):

    def __init__(self, text):
        self.text = text

    def render(self, context):
        return self.text

@register.tag
def verbatim(parser, token):
    text = []
    while 1:
        token = parser.tokens.pop(0)
        if token.contents == 'endverbatim':
            break
        if token.token_type == template.TOKEN_VAR:
            text.append('{{')
        elif token.token_type == template.TOKEN_BLOCK:
            text.append('{%')
        text.append(token.contents)
        if token.token_type == template.TOKEN_VAR:
            text.append('}}')
        elif token.token_type == template.TOKEN_BLOCK:
            text.append('%}')
    return VerbatimNode(''.join(text))

Dalam penggunaan file Anda:

from google.appengine.ext.webapp import template
template.register_template_library('utilities.verbatim_template_tag')

Sumber: http://bamboobig.blogspot.co.at/2011/09/notebook-using-jquery-templates-in.html

Anda dapat memberi tahu Django untuk menampilkan {{dan }}, serta string templat yang disediakan lainnya dengan menggunakan {% templatetag %}tag.

Misalnya, menggunakan {% templatetag openvariable %}keluaran akan {{.

Saya akan tetap dengan solusi yang menggunakan tag django {{}} dan juga angularjs {{}} dengan bagian verbatim atau templatetag.

Itu hanya karena Anda dapat mengubah cara kerja angularjs (sebagaimana disebutkan) melalui $ interpolateProvider.startSymbol $ interpolateProvider.endSymbol tetapi jika Anda mulai menggunakan komponen angular lain seperti ui-bootstrap Anda akan menemukan bahwa beberapa templat sudah SUDAH dibangun dengan tag sudut standar {{}}.

Sebagai contoh, lihat https://github.com/angular-ui/bootstrap/blob/master/template/dialog/message.html .

Jika Anda melakukan interpolasi sisi server, satu - satunya cara yang benar untuk melakukannya adalah dengan<>

$interpolateProvider.startSymbol('<{').endSymbol('}>');

Yang lainnya adalah vektor XSS.

Ini karena setiap pembatas sudut yang tidak lolos oleh Django dapat dimasukkan oleh pengguna ke string yang diinterpolasi; jika seseorang menetapkan nama pengguna mereka sebagai "{{evil_code}}", Angular akan dengan senang hati menjalankannya . Namun, jika Anda menggunakan karakter daripada Django lolos , ini tidak akan terjadi.