AngularJS与Django-模板标签冲突

本文翻译自：AngularJS with Django - Conflicting template tags

I want to use AngularJS with Django however they both use {{ }} as their template tags. 我想在Django中使用AngularJS，但是它们都使用{{ }}作为模板标记。 Is there an easy way to change one of the two to use some other custom templating tag? 是否有一种简单的方法可以将两者之一更改为使用其他自定义模板标签？

---

#1楼

参考：https://stackoom.com/question/YpyC/AngularJS与Django-模板标签冲突

---

#2楼

you can maybe try verbatim Django template tag and use it like this : 您可以尝试逐字 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 %} 

---

#3楼

For Angular 1.0 you should use the $interpolateProvider apis to configure the interpolation symbols: http://docs.angularjs.org/api/ng.$interpolateProvider . 对于Angular 1.0，您应该使用$ interpolateProvider api配置插值符号： http : //docs.angularjs.org/api/ng.$interpolateProvider 。

Something like this should do the trick: 这样的事情应该可以解决问题：

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

Keep in mind two things: 请记住两件事：

• mixing server-side and client-side templates is rarely a good idea and should be used with caution. 混合使用服务器端和客户端模板很少是一个好主意，应谨慎使用。 The main issues are: maintainability (hard to read) and security (double interpolation could expose a new security vector - eg while escaping of serverside and clientside templating by themselves might be secure, their combination might not be). 主要问题是：可维护性（难以阅读）和安全性（双重插值可能会暴露出新的安全性向量-例如，虽然逃避服务器端和客户端模板可能是安全的，但结合起来可能并不安全）。
• if you start using third-party directives (components) that use {{ }} in their templates then your configuration will break them. 如果您开始使用在模板中使用{{ }}的第三方指令（组件），则您的配置将破坏它们。 ( fix pending ) （ 修复中 ）

While there is nothing we can do about the first issue, except for warning people, we do need to address the second issue. 尽管除了警告人们外，我们无法对第一个问题采取任何措施，但我们确实需要解决第二个问题。

---

#4楼

We created a very simple filter in Django 'ng' that makes it easy to mix the two: 我们在Django'ng'中创建了一个非常简单的过滤器，可以轻松地将两者混合使用：

foo.html: foo.html：

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

The ng filter looks like this: 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)

---

#5楼

I found the code below helpful. 我发现下面的代码很有帮助。 I found the code here: http://djangosnippets.org/snippets/2787/ 我在这里找到了代码： 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)

---

#6楼

If you use django 1.5 and newer use: 如果您使用django 1.5和更高版本，请使用：

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

If you are stuck with django 1.2 on appengine extend the django syntax with the verbatim template command like this ... 如果您在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))

In your file use: 在您的文件中使用：

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 资料来源： http : //bamboobig.blogspot.co.at/2011/09/notebook-using-jquery-templates-in.html