Django ile AngularJS - Çakışan şablon etiketleri

AnjanJS Django ile kullanmak istiyorum, ancak her ikisi {{ }}de kendi şablon etiketleri kullanın . Diğer özel şablon etiketlerini kullanmak için ikisinden birini değiştirmenin kolay bir yolu var mı?

Açısal 1.0 için, enterpolasyon sembollerini yapılandırmak için $ interpolateProvider apis kullanmanız gerekir: http://docs.angularjs.org/api/ng.$interpolateProvider .

Böyle bir şey hile yapmalıdır:

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

İki şeyi aklınızda bulundurun:

• sunucu tarafı ve istemci tarafı şablonlarını karıştırmak nadiren iyi bir fikirdir ve dikkatle kullanılmalıdır. Ana sorunlar şunlardır: sürdürülebilirlik (okunması zor) ve güvenlik (çift enterpolasyon yeni bir güvenlik vektörü ortaya çıkarabilir - örneğin, sunucu tarafı ve istemci tarafındaki geçici şablonlar kendi başlarına kaçmak güvenli olsa da, kombinasyonları güvenli olmayabilir).
• {{ }}şablonlarında kullanılan üçüncü taraf yönergelerini (bileşenleri) kullanmaya başlarsanız , yapılandırmanız onları kıracaktır. ( düzeltme beklemede )

İlk sayı hakkında yapabileceğimiz hiçbir şey olmasa da, insanları uyarmak dışında ikinci sorunu ele almamız gerekiyor.

belki Django şablon etiketini kelimesi kelimesine deneyebilir ve şu şekilde kullanabilirsiniz:

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

Sayfanın bölümlerini düzgün bir şekilde ayırdıysanız "raw" etiketi kapsamındaki angularjs etiketlerini kolayca kullanabilirsiniz.

Jinja2 içinde

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

Django şablonunda (1.5'in üstünde)

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

Biz çok yarattıkDjango 'ng'de, ikisini karıştırmayı kolaylaştıran basit bir filtre :

foo.html:

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

ngSüzgeç aşağıdaki gibidir:

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)

Bu yüzden bugün Açısal IRC kanalında büyük yardım aldım. Angular'ın şablon etiketlerini kolayca değiştirebileceğiniz ortaya çıkıyor. Aşağıda gerekli parçacıkları dahil edilmelidir sonra senin açısal arasında (verilen örnek, görünen e-posta listeleri ve kullanacağı (())yeni şablon etiketleri gibi, kendi için yedek):

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

Ayrıca, ortaya çıkacak bir geliştirmeye startSymbolve endSymbolistediğiniz etiketlere ayarlanabilecek özelliklere işaret ettim .

Şablon etiketi olarak çift parantez (()) kullanmaya karşı oy kullanıyorum. İşlev çağrısı yapılmadığı sürece iyi çalışabilir, ancak aşağıdakileri denediğinde

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

Mac'te Firefox (10.0.2) ile, amaçlanan mantık yerine çok uzun bir hata aldım. <[]> benim için iyi gitti, en azından şimdiye kadar.

2012-03-29'u Düzenle: Lütfen $ invalidWidgets'in kullanımdan kaldırıldığını unutmayın. Ancak yine de çift parantez daha başka bir sargı kullanın. 0.10.7'den yüksek herhangi bir açısal sürüm için (sanırım) sarmalayıcıyı uygulama / modül tanımınızda çok daha kolay değiştirebilirsiniz:

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

API dokümanları .

Aşağıdaki kodu yararlı buldum. Kodu burada buldum: 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)

Her zaman {{}} http://docs.angularjs.org/api/ng/directive/ngBind yerine ng-bind kullanabilirsiniz.

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

Django 1.5 ve daha yenisini kullanıyorsanız:

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

Appengine üzerinde django 1.2 ile sıkışmışsanız, django sözdizimini şöyle verbatim şablon komutuyla uzatın ...

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

Dosyanızda şunları kullanın:

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

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

Etiketi kullanarak Django'ya çıktı vermesini {{ve }}diğer ayrılmış şablon dizelerini bildirebilirsiniz {% templatetag %}.

Örneğin, kullanma {% templatetag openvariable %}çıktı {{.

Hem django etiketleri hem de {{}} yanı sıra angularjs {{}} bir sözlü bölüm veya templatetag kullanan bir çözüm ile sopa.

Bunun nedeni, angularjs'in çalışma şeklini (bahsedildiği gibi) $ interpolateProvider.startSymbol $ interpolateProvider.endSymbol aracılığıyla değiştirebilmenizdir, ancak ui-bootstrap gibi diğer angularjs bileşenlerini kullanmaya başlarsanız, bazı şablonların ZATEN inşa edildiğini göreceksiniz. standart angularjs etiketleriyle {{}}.

Örneğin, https://github.com/angular-ui/bootstrap/blob/master/template/dialog/message.html adresine bakın .

Herhangi bir sunucu tarafı enterpolasyonu yaparsanız, bunu yapmanın tek doğru yolu<>

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

Başka bir şey bir XSS vektörüdür.

Bunun nedeni, Django tarafından kaçmayan herhangi bir Açısal sınırlayıcının kullanıcı tarafından enterpolasyonlu dizeye girilebilmesidir; Birisi kullanıcı adını "{{evil_code}}" olarak ayarlarsa, Angular mutlu bir şekilde çalıştırır . Bununla birlikte, Django'dan kaçan bir karakter kullanırsanız , bu olmaz.