我想在 Django 中使用 AngularJS,但是它们都{{ }}
用作模板标签。是否有一种简单的方法可以更改两者之一以使用其他一些自定义模板标签?
AngularJS 与 Django - 冲突的模板标签
IT技术
javascript
django
django-templates
angularjs
2021-01-30 17:59:26
6个回答
对于 Angular 1.0,您应该使用 $interpolateProvider apis 来配置插值符号:http : //docs.angularjs.org/api/ng.$interpolateProvider。
像这样的事情应该可以解决问题:
myModule.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('{[{');
$interpolateProvider.endSymbol('}]}');
});
请记住两件事:
- 混合服务器端和客户端模板很少是一个好主意,应该谨慎使用。主要问题是:可维护性(难以阅读)和安全性(双重插值可能会暴露一个新的安全向量——例如,虽然逃避服务器端和客户端模板本身可能是安全的,但它们的组合可能不安全)。
- 如果您开始使用
{{ }}
在其模板中使用的第三方指令(组件),那么您的配置将破坏它们。(修复待定)
虽然对于第一个问题我们无能为力,除了警告人们之外,我们确实需要解决第二个问题。
您可以尝试逐字逐字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 %}
如果您正确地将页面的各个部分分开,那么您可以轻松地在“原始”标签范围内使用 angularjs 标签。
在 jinja2
{% raw %}
// here you can write angularjs template tags.
{% endraw %}
在 Django 模板中(1.5 以上)
{% verbatim %}
// here you can write angularjs template tags.
{% endverbatim %}
我们在 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)
所以我今天在 Angular IRC 频道中得到了一些很大的帮助。事实证明,您可以非常轻松地更改 Angular 的模板标签。下面的必要片段应该包含在你的 angular include 之后(给定的例子出现在他们的邮件列表中,并将(())
用作新的模板标签,替代你自己的):
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
可以设置为任何的属性标签,你的愿望。
其它你可能感兴趣的问题