首頁 > php教程 > PHP开发 > 主體

解決Angular.Js與Django標籤衝突的方案

高洛峰
發布: 2016-12-27 15:13:26
原創
1348 人瀏覽過

前言

大家應該都知道,Django和Angular的模板系統使用了非常相似的標籤系統,比如說,都是使用{{ content }}表示變數名字。所以Django和Angular配合使用的時候,會引起衝突。我在網路上找到了一些解決方法。現在總結後分享給大家,下面來一起看看吧。

一、 改變AngularJs的預設標籤

下面的程式碼可以將Angular原來的標籤改成{[{ content }]} 。

修改Angular的標籤

myModule.config(function($interpolateProvider) {
 $interpolateProvider.startSymbol('{[{');
 $interpolateProvider.endSymbol('}]}');
});
登入後複製

   

這是比較簡單,並且直覺的一種方法。修改後的程式碼比較容易閱讀,一眼就能看出來是Django的標籤還是Angular的。缺點是容易與第三方的插件衝突(如果第三方的插件使用了指令等用到標籤的地方)。

二、 告訴Django不要渲染模板的其中一部分內容

從Django 1.5開始,支援{% verbatim %}標籤(verbatim的意思是逐字翻譯的,字面意思的),Django包裹不會渲染verbatim標籤的內容:

{% verbatim %}
 {{if dying}}Still alive.{{/if}}
{% endverbatim %}
登入後複製

   

這個標籤不支援嵌套,但是你可以為標籤加上名字:

{% verbatim myblock %}
 Avoid template rendering via the {% verbatim %}{% endverbatim %} block.
{% endverbatim myblock %}
登入後複製

   

的標籤,會作為myblock不解釋的一部分處理。

這種方案的優點是,不會增加程式碼的複雜度,並且是Django的原生支持,對Angular也沒有影響。缺點是可能在很多地方用到很多verbatim標籤,搞template很亂。

三、 使用第三方插件

目前,我已知的有django-angular。這個插件有混合django和angular標籤的功能。

正確解析angular標籤的同時,還可以繼續使用django的if等標籤。

{% 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 %}
登入後複製

   

這樣做的缺點是,引入插件增加了程式碼的複雜度,團隊的所有人都需要學​​習這種寫法,我個人感覺,也比較容易增加錯誤。

我覺得第二種比較合適, 寫入變數的時候盡量前後端分開,django負責返回靜態的模板,資料交給angular,沒大問題。

總結

以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或工作能帶來一定的幫助,如果有疑問大家可以留言交流。

更多解決Angular.Js與Django標籤衝突的方案相關文章請關注PHP中文網!


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!