javascript - tutoriels - python angular




AngularJS avec Django-Balises de gabarit en conflit (9)

J'ai donc obtenu de l'aide sur le canal IRC Angular aujourd'hui. Il s'avère que vous pouvez changer les balises de modèle d'Angular très facilement. Les extraits nécessaires ci-dessous doivent être inclus après votre inclusion angulaire (l'exemple donné apparaît sur leurs listes de diffusion et utiliserait (()) comme nouveau modèle de balise, remplacez le vôtre):

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

De plus, on m'a montré une amélioration à venir qui exposera les propriétés startSymbol et endSymbol qui peuvent être définies selon les balises que vous désirez.

Je veux utiliser AngularJS avec Django mais ils utilisent tous deux {{ }} comme balises de template. Y at-il un moyen facile de changer l'un des deux pour utiliser un autre tag de modèle personnalisé?


J'ai trouvé le code ci-dessous utile. J'ai trouvé le code ici: 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)

Je vote contre l'utilisation de doubles parenthèses (()) comme balise template. Cela peut bien fonctionner tant que l'appel de fonction n'est pas impliqué mais quand essayé le suivant

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

avec Firefox (10.0.2) sur Mac, j'ai eu une erreur terriblement longue au lieu de la logique voulue. <[]> s'est bien passé pour moi, au moins jusqu'à maintenant.

Modifier 2012-03-29: Veuillez noter que $ invalidWidgets est obsolète. Cependant, j'utiliserais encore un autre emballage que les doubles accolades. Pour toute version angulaire supérieure à 0.10.7 (je suppose), vous pouvez modifier l'encapsuleur beaucoup plus facilement dans la définition de votre application / module:

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

Documents de l'API


Nous avons créé un filtre très simple dans Django 'ng' qui facilite le mélange des deux:

foo.html:

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

Le filtre ng ressemble à ceci:

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)

Pour AngularJS v1.3.3, vous devez définir vos propres balises de gabarit comme celle-ci

AngularJS module

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

Page Web

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

Si vous avez correctement séparé des sections de page, vous pouvez facilement utiliser les balises angularjs dans la portée "brute".

En jinja2

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

Dans le modèle Django (ci-dessus 1.5)

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

Si vous utilisez django 1.5 et une utilisation plus récente:

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

Si vous êtes bloqué avec django 1.2 sur appengine, étendez la syntaxe django avec la commande verbatim template comme ceci ...

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

Dans votre fichier, utilisez:

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

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


Vous pouvez indiquer à Django de générer {{ et }} , ainsi que d'autres chaînes de modèles réservés en utilisant la balise {% templatetag %} .

Par exemple, l'utilisation de {% templatetag openvariable %} produirait {{ .


vous pouvez peut-être essayer la balise verbatim Django et l'utiliser comme ceci:

<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