AngularJS mit Django - Konflikte bei den Template-Tags

Question

Ich möchte AngularJS mit Django verwenden, jedoch verwenden beide {{ }} als ihre Vorlagetags. Gibt es einen einfachen Weg, um einen der beiden zu ändern, damit er ein anderes benutzerdefiniertes Vorlagetag verwendet?

Answer 1

Für Angular 1.0 sollten Sie die $interpolateProvider-APIs verwenden, um die Interpolationszeichen zu konfigurieren: http://docs.angularjs.org/api/ng.$interpolateProvider.

Etwas in dieser Art sollte das Problem lösen:

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

Denken Sie an zwei Dinge:

• Die Vermischung von Server- und Client-seitigen Vorlagen ist selten eine gute Idee und sollte mit Vorsicht verwendet werden. Die Hauptprobleme sind: Wartbarkeit (schwer zu lesen) und Sicherheit (doppelte Interpolation könnte einen neuen Sicherheitsvektor freilegen - z.B. während das Escapen von Server- und Client-seitigen Vorlagen für sichere, ihre Kombination möglicherweise nicht ist).
• Wenn Sie Drittanbieter-Direktiven (Komponenten) verwenden, die {{ }} in ihren Vorlagen nutzen, wird Ihre Konfiguration diese brechen. (ausstehende Korrektur)

Obwohl es nichts gibt, was wir gegen das erste Problem tun können, außer die Leute zu warnen, müssen wir das zweite Problem angehen.

Answer 2

Du kannst vielleicht den verbatim Django-Template-Tag ausprobieren und wie folgt verwenden:

{% verbatim %}

    10 ist {{ 5 + 5 }}

{% endverbatim %}

Answer 3

Wenn Sie die einzelnen Abschnitte der Seite richtig trennen, können Sie problemlos AngularJS-Tags im Bereich des "raw"-Tags verwenden.

In Jinja2

{% raw %}
    // hier können Sie AngularJS Template-Tags schreiben.
{% endraw %}

In Django Template (über 1.5)

{% verbatim %}    
    // hier können Sie AngularJS Template-Tags schreiben.
{% endverbatim %}

Answer 4

Wir haben in Django einen sehr einfachen Filter namens 'ng' erstellt, der es einfach macht, die beiden zu mischen:

foo.html:

...

  {{ django_context_var }}
  {{ 'angularScopeVar' | ng }}
  {{ 'angularScopeFunction()' | ng }}

...

Der ng Filter sieht so aus:

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)

Answer 5

Heute habe ich im Angular IRC-Kanal große Hilfe bekommen. Es stellt sich heraus, dass man die Template-Tags von Angular sehr einfach ändern kann. Die notwendigen Codeausschnitte unten sollten nach Ihrem Angular-Include eingefügt werden (das gegebene Beispiel erscheint auf deren Mailinglisten und würden (()) als neue Template-Tags verwenden, ersetzen Sie diese durch Ihre eigenen):

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

Zudem wurde mir auf eine bevorstehende Verbesserung hingewiesen, die startSymbol und endSymbol Eigenschaften freigeben wird, die auf die gewünschten Tags festgelegt werden können.