[javascript] 带有Django的AngularJS - 冲突的模板标签



5 Answers

你可以尝试verbatim 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 %}

Question

我想在Django中使用AngularJS,但他们都使用{{ }}作为模板标签。 有没有简单的方法来改变其中一个使用其他自定义模板标签?




我反对使用双括号(())作为模板标签。 只要没有涉及函数调用,但在尝试以下操作时它可能会正常工作

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文档







对于AngularJS v1.3.3,你应该像这样定义你自己的模板标签

AngularJS模块

angular.module('myapp', []).config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('{$');
    $interpolateProvider.endSymbol('$}');
});

网页

<a>{$ variable $}</a> 



我会坚持使用django标记{{}}以及angularjs {{}}与逐字节或templatetag的解决方案。

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

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




我们在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)





Related