AngularJS与Django-模板标签冲突

javascript django django-templates angularjs

73034 观看

12回复

14065 作者的声誉

我想将AngularJS与Django一起使用,但是它们都{{ }}用作模板标记。是否有一种简单的方法可以将两者之一更改为使用其他自定义模板标签?

作者: Endophage 的来源 发布者: 2011 年 11 月 28 日

回应 (12)


7

38429 作者的声誉

您可以使用标记告诉Django输出{{}},以及其他保留的模板字符串{% templatetag %}

例如,使用{% templatetag openvariable %}will输出{{

作者: Thomas Orozco 发布者: 29.11.2011 02:26

26

14065 作者的声誉

因此,今天我在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);
});

另外,我还指出了即将发布的增强功能,该功能将公开startSymbolendSymbol可设置为所需标签的属性。

作者: Endophage 发布者: 10.12.2011 01:51

17

171 作者的声誉

我反对使用双括号(())作为模板标记。只要不涉及任何函数调用,它就可能工作良好,但是在尝试以下操作时

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

在Mac上使用Firefox(10.0.2),我遇到了一个非常长的错误,而不是预期的逻辑。<[]>对我来说进展顺利,至少到现在为止。

编辑2012-03-29: 请注意,不建议使用$ invalidWidgets。但是,我仍然会使用除双括号之外的其他包装器。对于任何高于0.10.7(我想)的角度版本,您可以在应用程序/模块定义中更轻松地更改包装器:

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

API文档

作者: Lukas Bünger 发布者: 07.03.2012 08:26

120

1213 作者的声誉

您可以尝试逐字 Django模板标签并像这样使用它:

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

作者: Bessoufi Mounir 发布者: 30.05.2012 08:30

296

9464 作者的声誉

决定

对于Angular 1.0,您应该使用$ interpolateProvider api配置插值符号:http : //docs.angularjs.org/api/ng.$interpolateProvider

这样的事情应该可以解决问题:

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

请记住两件事:

  • 混合使用服务器端和客户端模板很少是一个好主意,应谨慎使用。主要问题是:可维护性(难于阅读)和安全性(双重插值可能会暴露出新的安全性向量-例如,虽然逃避服务器端和客户端模板可能是安全的,但结合起来可能并不安全)。
  • 如果您开始使用{{ }}在其模板中使用的第三方指令(组件),则您的配置将破坏它们。(修复中

尽管除了警告人们外,我们无法对第一个问题采取任何措施,但我们确实需要解决第二个问题。

作者: Igor Minar 发布者: 19.06.2012 07:55

29

507 作者的声誉

我们在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)
作者: Wes Alvaro 发布者: 24.08.2012 01:01

15

4524 作者的声誉

我发现下面的代码很有帮助。我在这里找到了代码: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)
作者: nu everest 发布者: 11.11.2012 12:34

11

2213 作者的声誉

如果您使用django 1.5和更高版本,请使用:

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

如果您在appengine上使用django 1.2感到困惑,请使用这样的逐字模板命令扩展django语法...

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

作者: cat 发布者: 04.02.2013 02:16

42

922 作者的声誉

如果您正确地将页面的各个部分分开,则可以轻松地在“原始”标签范围内使用angularjs标签。

在jinja2

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

在Django模板中(1.5以上)

{% verbatim %}    
    // here you can write angularjs template tags.
{% endverbatim %}
作者: thanksnote 发布者: 31.05.2013 02:39

3

603 作者的声誉

我会坚持使用一个Django标签{{}}以及带有逐字节或templatetag的angularjs {{}}的解决方案。

这仅仅是因为您可以通过$ interpolateProvider.startSymbol $ interpolateProvider.endSymbol来更改angularjs的工作方式(如上所述),但是如果您开始使用其他angularjs组件(如ui-bootstrap),则会发现某些模板已经构建使用标准angularjs标签{{}}。

例如,查看https://github.com/angular-ui/bootstrap/blob/master/template/dialog/message.html

作者: silviud 发布者: 29.06.2013 08:42

14

669 作者的声誉

您可以始终使用ng-bind代替{{}} http://docs.angularjs.org/api/ng/directive/ngBind

<span ng-bind="name"></span>
作者: Indomitable 发布者: 27.02.2014 02:45

0

7669 作者的声誉

如果您进行任何服务器端插值,则唯一正确的方法是<>

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

其他任何东西都是XSS向量。

这是因为用户可以将任何未由Django进行转义的Angular分隔符输入到内插字符串中。如果有人将用户名设置为“ {{evil_code}}”,Angular会很乐意运行它。但是,如果使用的字符不是Django转义符,则不会发生这种情况。

作者: Dan 发布者: 21.02.2016 05:49
32x32