解决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 相关文章推荐
JavaScript去除空格的三种方法(正则/传参函数/trim)
Feb 06 Javascript
js函数调用的方式
May 06 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
Jun 12 Javascript
基于jQuery实现仿淘宝套餐选择插件
Mar 04 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
Aug 05 Javascript
JavaScript中 ES6 generator数据类型详解
Aug 11 Javascript
jquery获取easyui日期控件的值实现方法
Nov 09 Javascript
vue组件间通信解析
Mar 01 Javascript
微信小程序三级联动地址选择器的实例代码
Jul 12 Javascript
vue实现同一个页面可以有多个router-view的方法
Sep 20 Javascript
利用React Router4实现的服务端直出渲染(SSR)
Jan 07 Javascript
vue实现两个组件之间数据共享和修改操作
Nov 12 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
AMFPHP php远程调用(RPC, Remote Procedure Call)工具 快速入门教程
2010/05/10 PHP
PHP MemCached 高级缓存应用代码
2010/08/05 PHP
解析在PHP中使用全局变量的几种方法
2013/06/24 PHP
PHP 面向对象程序设计(oop)学习笔记 (五) - PHP 命名空间
2014/06/12 PHP
微信公众号开发之语音消息识别php代码
2016/08/08 PHP
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
非常有用的40款jQuery 插件推荐(系列二)
2011/12/25 Javascript
jquery配合css简单实现返回顶部效果
2013/09/30 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
2014/01/06 Javascript
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
javascript检查浏览器是否支持flash的实现代码
2014/08/14 Javascript
JS实现跟随鼠标闪烁转动色块的方法
2015/02/26 Javascript
Angularjs 制作购物车功能实例代码
2016/09/14 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
2017/02/22 Javascript
jQuery使用ajax_动力节点Java学院整理
2017/07/05 jQuery
在Vue中使用highCharts绘制3d饼图的方法
2018/02/08 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
2019/04/04 Javascript
详解小程序之简单登录注册表单验证
2019/05/13 Javascript
三步实现ionic3点击退出app程序
2019/09/17 Javascript
js中forEach,for in,for of循环的用法示例小结
2020/03/14 Javascript
Python采用Django制作简易的知乎日报API
2016/08/03 Python
利用python爬取斗鱼app中照片方法实例
2017/12/03 Python
django框架cookie和session用法实例详解
2019/12/10 Python
Django restful framework生成API文档过程详解
2020/11/12 Python
亚马逊新加坡官方网站:Amazon.sg
2020/03/25 全球购物
学校介绍信范文
2014/01/14 职场文书
合作协议书范本
2014/04/17 职场文书
爱国卫生月活动总结范文
2014/04/25 职场文书
经济贸易系求职信
2014/08/04 职场文书
高中生第一学年自我鉴定2015
2014/09/28 职场文书
MySQL 表空间碎片的概念及相关问题解决
2021/05/07 MySQL
MySQL修改默认引擎和字符集详情
2021/09/25 MySQL
Nebula Graph解决风控业务实践
2022/03/31 MySQL
Win Server2016远程桌面如何允许多用户同时登录
2022/06/10 Servers
Python 避免字典和元组的多重嵌套问题
2022/07/15 Python