AngularJs с джанго - противоречивые теги шаблонов

Question

Я хочу использовать AngularJs с Django, однако они оба используют {{ }} как их шаблон теги. Есть ли простой способ изменить один из двух, чтобы использовать какой -то другой пользовательский шаблон?

Answer 1

Для Angular 1.0 вы должны использовать API $ InterpolateProvider для настройки символов интерполяции: http://docs.angularjs.org/api/ng.$nterpolateprovider.

Что -то подобное должно сделать свое дело:

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

Имейте в виду две вещи:

• Смешивание шаблонов на стороне сервера и клиента редко бывает хорошей идеей и следует использовать с осторожностью. Основные проблемы: обслуживание (трудно прочитать) и безопасность (двойная интерполяция может выявить новый вектор безопасности - например, при спасении сервер и шаблона клиентов сами по себе может быть в безопасности, их комбинация не может быть).
• Если вы начнете использовать сторонние директивы (компоненты), которые используют {{ }} В своих шаблонах ваша конфигурация сломает их. (Исправить в ожидании)

Несмотря на то, что мы ничего не можем сделать с первой проблемой, за исключением предупреждения людей, нам нужно решить второй вопрос.

Answer 2

Вы можете попробовать дословно Джанго шаблон и используйте его так:

<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

Если вы правильно разделили разделы страницы, вы можете легко использовать теги AngularJS в «RAW».

В Jinja2

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

В шаблоне Django (выше 1,5)

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

Answer 4

Мы создали очень Простой фильтр в 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)

Answer 5

Итак, сегодня я получил отличную помощь в канале Angular IRC. Оказывается, вы можете очень легко изменить метки шаблона 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 Свойства, которые могут быть установлены на любые теги, которые вы желаете.

Answer 6

Я голосую против использования двойных скобок (()) в качестве тега шаблона. Это может работать хорошо, пока не задействовано функциональный вызов, но когда они попробовали следующие

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 документы.

Answer 7

Я нашел код ниже полезным. Я нашел код здесь: 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

Вы всегда можете использовать Ng-Bind вместо {{}}http://docs.angularjs.org/api/ng/directive/ngbind

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

Answer 9

Если вы используете Django 1.5 и более новое использование:

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

Если вы застряли с Django 1.2 на Appengine, расширите синтаксис Django с помощью команды Vorbatim 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

Answer 10

Вы можете сказать Джанго вывести {{ а также }}, а также другие зарезервированные струны шаблона с помощью {% templatetag %} ярлык.

Например, использование {% templatetag openvariable %} будет выходить {{.

Answer 11

Я бы придерживался решения, в котором используются оба тега django {{}}, а также angularjs {{}} с помощью словесной секции или TemplateTag.

Это просто потому, что вы можете изменить способ, которым AngularJS работает (как упомянуто) через $ interpolateProvider.startSymbol $ interpolateProvider.endersyMbol, но если вы начнете использовать другие компоненты AngularJS, такие как UI-Bootstrap, вы обнаружите, что некоторые из шаблонов уже построены со стандартными метками angularjs {{}}.

Например, посмотрите на https://github.com/angular-ui/bootstrap/blob/master/template/dialog/message.html.

Answer 12

Если вы делаете какую-либо интерполяцию на стороне сервера, Только правильный способ сделать это с <>

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

Все остальное - вектор XSS.

Это связано с тем, что любые угловые делимиторы, которые не сбежались Django, могут быть введены пользователем в интерполированную строку; Если кто -то устанавливает свое имя пользователя как "{{vil_code}}", Угловой будет с радостью запустить это. Анкет Если вы используете персонаж, чем Джанго убегает, однако, этого не произойдет.