AngularJS กับ Django - แท็กแม่แบบที่ขัดแย้งกัน

ฉันต้องการใช้ AngularJS กับ Django ทั้งคู่ใช้{{ }}เป็นแท็กเทมเพลต มีวิธีง่ายๆในการเปลี่ยนหนึ่งในสองรายการนี้เพื่อใช้แท็กการสร้างเท็มเพลตแบบกำหนดเองอื่น ๆ หรือไม่?

สำหรับเชิงมุม 1.0 คุณควรใช้ $ interpolateProvider API เพื่อกำหนดค่าสัญลักษณ์การแก้ไข: http://docs.angularjs.org/api/ng.$interpolateProvider

สิ่งนี้ควรทำเคล็ดลับ:

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

โปรดทราบสองสิ่ง:

• การผสมเทมเพลตฝั่งเซิร์ฟเวอร์และฝั่งไคลเอ็นต์ไม่ค่อยเป็นความคิดที่ดีและควรใช้ด้วยความระมัดระวัง ปัญหาหลักคือ: การบำรุงรักษา (อ่านยาก) และความปลอดภัย (การแก้ไขสองครั้งสามารถเปิดเผยเวกเตอร์ความปลอดภัยใหม่ - เช่นในขณะที่การหลบหนีจากฝั่งเซิร์ฟเวอร์และการสร้างแม่แบบไคลเอนต์ด้วยตัวเองอาจจะปลอดภัย
• หากคุณเริ่มใช้คำสั่งของบุคคลที่สาม (ส่วนประกอบ) ที่ใช้{{ }}ในแม่แบบการกำหนดค่าของคุณจะทำให้แตก ( รอการแก้ไข )

ในขณะที่ไม่มีสิ่งใดที่เราสามารถทำได้เกี่ยวกับปัญหาแรกยกเว้นผู้เตือนเราจำเป็นต้องแก้ไขปัญหาที่สอง

คุณสามารถลองใช้คำต่อคำแท็กเทมเพลต Django และใช้แบบนี้:

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

หากคุณแยกส่วนของหน้าอย่างเหมาะสมคุณสามารถใช้แท็ก angularjs ในขอบเขตแท็ก "raw" ได้อย่างง่ายดาย

ใน jinja2

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

ในแม่แบบ Django (สูงกว่า 1.5)

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

เราสร้างตัวกรองที่ง่ายมากใน Django 'ng' ซึ่งทำให้ง่ายต่อการผสมทั้งสอง:

foo.html:

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

ngกรองมีลักษณะเช่นนี้

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)

ดังนั้นฉันจึงได้รับความช่วยเหลือที่ดีในช่อง IRC ของ Angular วันนี้ ปรากฎว่าคุณสามารถเปลี่ยนแท็กแม่แบบของ Angular ได้อย่างง่ายดาย ข้อมูลโค้ดที่จำเป็นด้านล่างควรรวมไว้หลังจากการรวมเชิงมุมของคุณ (ตัวอย่างที่กำหนดปรากฏในรายการส่งเมลและจะใช้(())เป็นแท็กเทมเพลตใหม่แทนที่ตัวคุณเอง):

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

นอกจากนี้ฉันยังได้รับการชี้ให้เห็นถึงการปรับปรุงที่จะเกิดขึ้นstartSymbolและendSymbolคุณสมบัติที่สามารถตั้งค่าเป็นแท็กที่คุณต้องการ

ฉันลงคะแนนคัดค้านการใช้วงเล็บคู่ (()) เป็นแท็กเทมเพลต มันอาจทำงานได้ดีตราบใดที่ไม่มีการเรียกฟังก์ชั่นที่เกี่ยวข้อง แต่เมื่อลองต่อไปนี้

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

กับ Firefox (10.0.2) บน Mac ฉันได้รับข้อผิดพลาดยาวมาก ๆ แทนที่จะเป็นตรรกะที่ตั้งใจไว้ <[]> เป็นไปด้วยดีสำหรับฉันอย่างน้อยก็จนถึงตอนนี้

แก้ไข 2012-03-29: โปรดทราบว่า $ invalidWidgets เลิกใช้แล้ว อย่างไรก็ตามฉันยังคงใช้กระดาษห่ออื่นมากกว่าเครื่องมือจัดฟันคู่ สำหรับเวอร์ชันเชิงมุมใด ๆ ที่สูงกว่า 0.10.7 (ฉันเดา) คุณสามารถเปลี่ยนเสื้อคลุมได้ง่ายขึ้นมากในการกำหนดแอพ / โมดูลของคุณ:

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

เอกสาร API

ฉันพบรหัสด้านล่างมีประโยชน์ ฉันพบรหัสที่นี่: 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)

คุณสามารถใช้ ng-bind แทน {{}} http://docs.angularjs.org/api/ng/directive/ngBind

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

ถ้าคุณใช้ django 1.5 และใหม่กว่าใช้:

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

หากคุณติดกับ django 1.2 ใน appengine ให้ขยาย django syntax ด้วยคำสั่ง verbatim template เช่นนี้ ...

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

ในการใช้ไฟล์ของคุณ:

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

ที่มา: http://bamboobig.blogspot.co.at/2011/09/notebook-using-jquery-templates-in.html

คุณสามารถบอก Django ให้ส่งออก{{และ}}เช่นเดียวกับสตริงแม่แบบลิขสิทธิ์อื่น ๆ โดยใช้{% templatetag %}แท็ก

ตัวอย่างเช่นการใช้การส่งออกหากว่า{% templatetag openvariable %}{{

ฉันจะยึดติดกับโซลูชันที่ใช้แท็ก django ทั้ง {{}} และ angularjs {{}} ด้วยส่วนคำต่อคำหรือเทมเพลตแท็ก

นั่นเป็นเพียงเพราะคุณสามารถเปลี่ยนวิธีการทำงานของ angularjs (ดังที่กล่าวไว้) ผ่านทาง $ interpolateProvider.startSymbol $ interpolateProvider.endSymbol แต่ถ้าคุณเริ่มใช้ส่วนประกอบ angularjs อื่น ๆ เช่น ui-bootstrap คุณจะพบว่าเทมเพลตบางตัวเป็นแบบ ALREADY ด้วยแท็ก angularjs มาตรฐาน {{}}

ยกตัวอย่างเช่นดูที่https://github.com/angular-ui/bootstrap/blob/master/template/dialog/message.html

ถ้าคุณทำสิ่งใดแก้ไขฝั่งเซิร์ฟเวอร์ที่เพียงวิธีที่ถูกต้องที่จะทำนี้ด้วย<>

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

สิ่งอื่นใดคือเวกเตอร์ XSS

นี่เป็นเพราะตัวคั่นเชิงมุมใด ๆ ที่ไม่ได้หลบหนีจาก Django สามารถป้อนได้โดยผู้ใช้ในสตริงที่ถูกแทรกเข้าไป ถ้ามีคนกำหนดชื่อผู้ใช้ของพวกเขาเป็น "{{}} evil_code" เชิงมุมจะมีความสุขเรียกใช้ หากคุณใช้ตัวละครที่ดีกว่า Django หนีออกมาสิ่งนี้จะไม่เกิดขึ้น