javascript - AngularJS with Django-Tag modello in conflitto




django-templates (9)

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

foo.html:

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

Il filtro ng aspetto:

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)

Voglio utilizzare AngularJS con Django, tuttavia entrambi usano {{ }} come tag modello. C'è un modo semplice per cambiare uno dei due per usare qualche altro tag di template personalizzato?


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

Per AngularJS v1.3.3 dovresti definire i tuoi tag modello come questo

Modulo AngularJS

angular.module('myapp', []).config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('{$');
    $interpolateProvider.endSymbol('$}');
});

Pagina web

<a>{$ variable $}</a> 

Puoi dire a Django di mostrare {{ e }} , così come altre stringhe del template riservate usando il tag {% templatetag %} .

Ad esempio, l'utilizzo di {% templatetag openvariable %} {{ .


Quindi oggi ho ricevuto un grande aiuto nel canale Angular IRC. Si scopre che puoi modificare molto facilmente i tag modello di Angular. I frammenti necessari di seguito dovrebbero essere inclusi dopo l'inclusione angolare (l'esempio fornito appare nelle loro mailing list e userebbe (()) come nuovi tag del modello, sostitutivi del 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 indicato un miglioramento imminente che esporrà le proprietà startSymbol e endSymbol che possono essere impostate su qualsiasi tag desiderato.


Se hai separato le sezioni della pagina in modo corretto, puoi facilmente utilizzare i tag angularjs in ambito di tag "raw".

In jinja2

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

Nel template Django (sopra 1.5)

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

Se usi django 1.5 e più recenti usi:

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

Se sei bloccato con django 1.2 su appengine estendi la sintassi di django con il comando template fedatim 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 tuo file usa:

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


Vorrei attenermi a una soluzione che utilizzi sia i tag django {{}} che gli angularjs {{}} con una sezione letterale o templatetag.

Questo è semplicemente perché puoi cambiare il modo in cui funziona angularjs (come accennato) tramite $ interpolateProvider.startSymbol $ interpolateProvider.endSymbol ma se inizi a utilizzare altri componenti di angularjs come ui-bootstrap scoprirai che alcuni dei modelli sono già GIÀ compilati con i tag angularjs standard {{}}.

Per esempio guarda https://github.com/angular-ui/bootstrap/blob/master/template/dialog/message.html .


puoi provare il tag template Django verbatim 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 %}





angularjs