Django
和
Angular
的模板系统使用了非常相似的标签系统,比如说,都是使
用 {{ content }}
表示变量名字。所以Django和Angular配合使用的时候,会引起冲突。
本文和大家分享的就是解决这个冲突的方法,希望对大家
学习AngularJs有所帮助,一起来看看吧。
一、 改变AngularJs的默认标签
下面的代码可以将Angular
原来的标签改成
{[{ content }]}
。
myModule.config(
function($interpolateProvider) {
$interpolateProvider.startSymbol('{[{');
$interpolateProvider.endSymbol('}]}');
});
这是比较简单,并且直观的一种方法。修改之后的代码比较容易阅读,一眼就能看出来是Django
的标签还是
Angular
的。缺点是很容易与第三方的插件冲突(如果第三方的插件使用了指令等用到标签的地方)。
二、 告诉Django不要渲染模板的其中一部分内容
从Django 1.5开始,支持 {% verbatim %}
标
签(verbatim
的意思是逐字翻译的,字面意思的),
Django
不会渲染
verbatim
标签包裹的内容:
{% verbatim
%}
{{if dying}}Stillalive.{{/if}}{% endverbatim
%}
这个标签不支持嵌套,但是你可以为标签添加名字:
{% verbatimmyblock
%}
Avoid template rendering via the {% verbatim
%}{% endverbatim
%} block.{% endverbatimmyblock
%}
这样,Django
会寻找
myblock
的
endverbatim
作为结束的标志,中间插入了
verbatim
标签,会作为
myblock
中不解释的一部分处理。
这种方案的优点是,不会增加代码的复杂度,并且是Django
的原生支持,对
Angular
也没有影响。缺点是可能在很多地方用到很多
verbatim
标签,搞得
template
很乱。
三、 使用第三方插件
目前,我已知的有 django-angular
。这个插件有混合django和angular标签的功能。
正确解析angular标签的同时,还可以继续使用django的if等标签。
{% loaddjng_tags
%}{% angularjsng
%}<div
{% if
ng %} ng-repeat="item in items"{% endif
%}>
<h4
><a
ng-href="{{ item.absolute_url }}"{% if
not ng %} href="{{ item.absolute_url }}"{% endif
%}>{{ item.name }}a>h4>
<imgng-src="
{{ item.image.url }}"{% if
not ng %} src="{{ item.image.url }}"{% endif
%} width="{{ item.image.width }}" height="{{ item.image.height }}" />
<div
{% if
ng %} ng-bind-html="item.description"{% endif
%}>{% if
not ng %}{{ item.description }}{% endif
%}div>div>{% endangularjs
%}
这样做的缺点是,引入插件增加了代码的复杂度,团队的所有人都需要学习这种写法,我个人感觉,也比较容易增加错误。
我觉得第二种比较合适,
写入变量的时候尽量前后端分开,
django
负责返回静态的模板,数据交给
angular
,没大问题。
来源:
卡瓦邦噶!