解决Angular.Js与Django标签冲突的方案


Posted in Javascript onDecember 20, 2016

前言

大家应该都知道,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 %}

这样,Django会寻找myblock的endverbatim作为结束的标志,中间插入了verbatim标签,会作为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,没大问题。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
3Z版基于jquery的图片复选框(asp.net+jquery)
Apr 12 Javascript
基本jquery的控制tabs打开的数量的代码
Oct 17 Javascript
JS 自定义带默认值的函数
Jul 21 Javascript
JavaScript设计模式之代理模式介绍
Dec 28 Javascript
同一个网页中实现多个JavaScript特效的方法
Feb 02 Javascript
JS实现随机乱撞彩色圆球特效的方法
May 05 Javascript
第九章之路径分页标签与徽章组件
Apr 25 Javascript
jQuery插件ajaxfileupload.js实现上传文件
Oct 23 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
Nov 25 Javascript
详解vue-router 路由元信息
Sep 13 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
Apr 28 Javascript
vue 调用 RESTful风格接口操作
Aug 11 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
Dec 20 #Javascript
JS基于面向对象实现的拖拽功能示例
Dec 20 #Javascript
详解为Angular.js内置$http服务添加拦截器的方法
Dec 20 #Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 #Javascript
JS简单实现表格排序功能示例
Dec 20 #Javascript
深入了解JavaScript的逻辑运算符(与、或)
Dec 20 #Javascript
js定时器实例分享
Dec 20 #Javascript
You might like
php中cookie的作用域
2008/03/27 PHP
php mysql索引问题
2008/06/07 PHP
PHP小技巧之函数重载
2014/06/02 PHP
php生成RSS订阅的方法
2015/02/13 PHP
php使用CURL不依赖COOKIEJAR获取COOKIE的方法
2015/06/17 PHP
js程序中美元符号$是什么
2008/06/05 Javascript
使用jQuery.fn自定义jQuery翻页插件
2013/01/20 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
2013/04/12 Javascript
NodeJs使用Mysql模块实现事务处理实例
2017/05/31 NodeJs
js判断节假日实例代码
2017/12/27 Javascript
详解 vue better-scroll滚动插件排坑
2018/02/08 Javascript
微信小程序实现红包雨功能
2018/07/11 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
2019/01/21 Javascript
[02:08:58]2014 DOTA2国际邀请赛中国区预选赛 Ne VS CIS
2014/05/22 DOTA
[37:29]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.19
2020/11/19 DOTA
推荐下python/ironpython:从入门到精通
2007/10/02 Python
Python中asyncore的用法实例
2014/09/29 Python
实现python版本的按任意键继续/退出
2016/09/26 Python
pandas数值计算与排序方法
2018/04/12 Python
Python 图像处理: 生成二维高斯分布蒙版的实例
2019/07/04 Python
使用 pytorch 创建神经网络拟合sin函数的实现
2020/02/24 Python
Django+boostrap 美化admin后台的操作
2020/03/11 Python
如何通过Python3和ssl实现加密通信功能
2020/05/09 Python
详解python datetime模块
2020/08/17 Python
python map比for循环快在哪
2020/09/21 Python
Cpython解释器中的GIL全局解释器锁
2020/11/09 Python
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
2013/01/09 HTML / CSS
美国玛丽莎收藏奢华时尚商店:Marissa Collections
2016/11/21 全球购物
竞聘上岗演讲稿范文
2014/01/10 职场文书
二人合伙经营协议书
2014/09/13 职场文书
2014年人事专员工作总结
2014/11/19 职场文书
党的群众路线教育实践活动先进个人材料
2014/12/24 职场文书
工作检讨书怎么写
2015/01/23 职场文书
会计工作检讨书
2015/02/19 职场文书
工程质量保证书
2015/05/09 职场文书
Python测试框架pytest核心库pluggy详解
2022/08/05 Golang