前言

大家應(yīng)該都知道，Django和Angular的模板系統(tǒng)使用了非常相似的標(biāo)簽系統(tǒng)，比如說，都是使用{{ content }}表示變量名字。所以Django和Angular配合使用的時候，會引起沖突。我在網(wǎng)上找到了一些解決方法。現(xiàn)在總結(jié)后分享給大家，下面來一起看看吧。

一、 改變AngularJs的默認(rèn)標(biāo)簽

下面的代碼可以將Angular原來的標(biāo)簽改成{[{ content }]} 。

修改Angular的標(biāo)簽

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

這是比較簡單，并且直觀的一種方法。修改之后的代碼比較容易閱讀，一眼就能看出來是Django的標(biāo)簽還是Angular的。缺點是很容易與第三方的插件沖突（如果第三方的插件使用了指令等用到標(biāo)簽的地方）。

二、 告訴Django不要渲染模板的其中一部分內(nèi)容

從Django 1.5開始，支持{% verbatim %}標(biāo)簽（verbatim的意思是逐字翻譯的，字面意思的），Django不會渲染verbatim標(biāo)簽包裹的內(nèi)容：

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

這個標(biāo)簽不支持嵌套，但是你可以為標(biāo)簽添加名字：

{% verbatim myblock %} Avoid template rendering via the {% verbatim %}{% endverbatim %} block.{% endverbatim myblock %}

這樣，Django會尋找myblock的endverbatim作為結(jié)束的標(biāo)志，中間插入了verbatim標(biāo)簽，會作為myblock中不解釋的一部分處理。

這種方案的優(yōu)點是，不會增加代碼的復(fù)雜度，并且是Django的原生支持，對Angular也沒有影響。缺點是可能在很多地方用到很多verbatim標(biāo)簽，搞得template很亂。

三、 使用第三方插件

目前，我已知的有django-angular。這個插件有混合django和angular標(biāo)簽的功能。

正確解析angular標(biāo)簽的同時，還可以繼續(xù)使用django的if等標(biāo)簽。

{% load djng_tags %}{% angularjs ng %}<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> <img ng-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 %}

這樣做的缺點是，引入插件增加了代碼的復(fù)雜度，團(tuán)隊的所有人都需要學(xué)習(xí)這種寫法，我個人感覺，也比較容易增加錯誤。

我覺得第二種比較合適, 寫入變量的時候盡量前后端分開，django負(fù)責(zé)返回靜態(tài)的模板，數(shù)據(jù)交給angular，沒大問題。

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。