AngularJS con Django - contrastanti tag modello

Question

voglio usare AngularJS con Django tuttavia essi sia per uso {{ }} come i loro tag modello. C'è un modo semplice per cambiare uno dei due ad usare qualche altro tag di template personalizzato?

Answer 1

Per angolare 1.0 è necessario utilizzare il $ interpolateProvider API per configurare i simboli di interpolazione: http: //docs.angularjs. org / api / ng. $ interpolateProvider .

Qualcosa del genere dovrebbe fare il trucco:

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

tenere a mente due cose:

• miscelazione modelli lato server e lato client è raramente una buona idea e dovrebbe essere usato con cautela. I temi principali sono:. Manutenibilità (difficile da leggere) e la sicurezza (doppia interpolazione potrebbe esporre un nuovo vettore di sicurezza - per esempio durante la fuga del lato server e lato client di template da soli potrebbe essere sicura, la loro combinazione può non essere)
• se si inizia con le direttive di terze parti (componenti) che l'uso {{ }} nei loro modelli, allora la configurazione sarà romperli. ( correzione attesa )

Mentre non v'è nulla che possiamo fare per il primo numero, tranne che per avvisare la gente, abbiamo bisogno di affrontare il secondo problema.

Answer 2

si può forse provare testualmente Django tag template e usarlo in questo modo:

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

Answer 3

Se avete fatto le sezioni separate di pagina in modo corretto, allora si può facilmente utilizzare i tag angularjs portata tag "raw".

In Jinja2

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

Nel modello di Django (sopra 1.5)

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

Answer 4

Abbiamo creato un molto semplice filtro in Django 'ng' che lo rende facile da miscelare i due:

foo.html:

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

L'aspetto del filtro ng come questo:

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

Così ho avuto un po 'di grande aiuto nel canale IRC angolare oggi. Si scopre è possibile modificare i tag dei template angolari molto facilmente. I frammenti necessari sottostanti devono essere inclusi dopo il vostro angolare includere (i dati appare esempio sul loro mailing list e userebbero (()) come i nuovi tag di modello, sostituto per il proprio):

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

Inoltre, mi è stato fatto ad un miglioramento imminente che esporrà le proprietà startSymbol e endSymbol che possono essere impostati a qualsiasi tag che si desidera.

Answer 6

I voti contro l'uso doppie parentesi (()) come tag modello. Può funzionare bene fino a quando non chiamata di funzione è coinvolto, ma quando provato quanto segue

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

con Firefox (10.0.2) su Mac ho ottenuto un terribilmente lunga errore invece della logica previsto. <[]> È andato bene per me, almeno fino ad ora.

Modifica 2012-03-29: Si prega di notare che $ invalidWidgets è deprecato. Comunque mi piacerebbe ancora uso un altro involucro di doppie parentesi graffe. Per qualsiasi versione angolare maggiore di 0.10.7 (credo) è possibile modificare l'involucro molto più facile nella definizione app / modulo:

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

Documentazione API .

Answer 7

Ho trovato il codice qui sotto utili. Ho trovato il codice qui: 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)

Answer 8

Si può sempre usare ng-bind, invece di {{}} http://docs.angularjs.org/api/ng/directive/ngBind

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

Answer 9

Se si utilizza Django 1.5 e più recente utilizzo:

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

Se si è bloccato con Django 1.2 su AppEngine estendere la sintassi di Django con il comando modello testualmente come questo ...

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

Nel vostro uso del file:

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

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

Answer 10

Si può dire Django a {{ uscita e }}, così come altre stringhe di modello riservati utilizzando il {% templatetag %} tag.

Per esempio, utilizzando {% templatetag openvariable %} sarebbe uscita {{.

Answer 11

Vorrei bastone con una soluzione che utilizza entrambi i tag Django {{}} così angularjs {{}} con una o una sezione letteralmente sia templatetag.

Questo è semplicemente perché si può cambiare il modo in cui angularjs opere (come detto) tramite il $ interpolateProvider.startSymbol $ interpolateProvider.endSymbol ma se si inizia ad utilizzare altri componenti angularjs come il ui-bootstrap troverete che alcuni dei modelli sono già costruito con le etichette standard di angularjs {{}}.

Per esempio un'occhiata alla https: // GitHub. com / angolare-ui / bootstrap / blob / master / template / dialogo / message.html .

Answer 12

Se si esegue un'interpolazione sul lato server, il solo corretto modo per farlo è con <>

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

Tutto il resto è un vettore di XSS.

Questo perché dei delimitatori angolari che non sono sfuggiti da Django possono essere inseriti dall'utente nella stringa interpolata; se qualcuno mette il proprio nome utente come "{{}} evil_code", angolare sarà lieto di eseguirlo . Se si utilizza un personaggio di Django sfugge , tuttavia, questo non accadrà.