我想使用AngularJS与Django,但他们都使用{{}}作为他们的模板标签。是否有一种简单的方法来更改其中之一,以使用其他自定义模板标签?
当前回答
我发现下面的代码很有用。我在这里找到了代码: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)
其他回答
我们在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)
如果你使用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
你总是可以使用ng-bind而不是{{}} http://docs.angularjs.org/api/ng/directive/ngBind
<span ng-bind="name"></span>
对于Angular 1.0,你应该使用$interpolateProvider api来配置插值符号:http://docs.angularjs.org/api/ng.$interpolateProvider。
像这样的东西应该可以达到目的:
myModule.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('{[{');
$interpolateProvider.endSymbol('}]}');
});
请记住两件事:
混合服务器端和客户端模板很少是一个好主意,应该谨慎使用。主要问题是:可维护性(难以阅读)和安全性(双插值可能会暴露一个新的安全向量——例如,服务器端和客户端模板本身的转义可能是安全的,但它们的组合可能不安全)。 如果你开始使用在模板中使用{{}}的第三方指令(组件),那么你的配置将破坏它们。(修复等待)
虽然我们对第一个问题无能为力,除了警告人们,但我们确实需要解决第二个问题。
如果你正确地分离了页面的各个部分,那么你可以很容易地在“raw”标签范围内使用angularjs标签。
在jinja2
{% raw %}
// here you can write angularjs template tags.
{% endraw %}
在Django模板中(1.5以上)
{% verbatim %}
// here you can write angularjs template tags.
{% endverbatim %}
推荐文章
- 如何直接从测试驱动程序调用自定义的Django manage.py命令?
- 使用jQuery以像素为整数填充或边距值
- 检查是否选择了jQuery选项,如果没有选择默认值
- Next.js React应用中没有定义Window
- 如何重置笑话模拟函数调用计数之前,每次测试
- 如何强制一个功能React组件渲染?
- 在javascript中从平面数组构建树数组
- 将Dropzone.js与其他字段集成到现有的HTML表单中
- 如何在AngularJS中动态添加指令?
- 如何在AngularJS中观察路由变化?
- JavaScript DOM删除元素
- 将dd-mm-yyyy字符串转换为日期
- Javascript复选框onChange
- Javascript函数前导bang !语法
- 如何在页面上遍历所有DOM元素?