解决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 相关文章推荐
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
Mar 01 Javascript
jquery与prototype框架的详细对比
Nov 21 Javascript
JavaScript 模块化编程(笔记)
Apr 08 Javascript
Bootstrap表单组件教程详解
Apr 26 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
Jan 04 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
Vue仿支付宝支付功能
May 25 Javascript
详解Vue中使用Echarts的两种方式
Jul 03 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
Jul 10 Javascript
vue鼠标悬停事件实例详解
Apr 01 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
Aug 19 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
Sep 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
深入php常用函数的使用汇总
2013/06/08 PHP
PHP登陆后跳转到登陆前页面实现思路及代码
2014/01/17 PHP
通过dbi使用perl连接mysql数据库的方法
2014/04/16 PHP
phpmailer在服务器上不能正常发送邮件的解决办法
2014/07/08 PHP
Yii框架调试心得--在页面输出执行sql语句
2014/12/25 PHP
php利用imagemagick实现复古老照片效果实例
2017/02/16 PHP
Thinkphp结合ajaxFileUpload实现异步图片传输示例
2017/03/13 PHP
PHP的curl函数的用法总结
2019/02/14 PHP
JavaScript脚本性能的优化方法
2007/02/02 Javascript
$.ajax json数据传递方法
2008/11/19 Javascript
jquery.jstree 增加节点的双击事件代码
2010/07/27 Javascript
Js制作点击输入框时默认文字消失的效果
2015/09/05 Javascript
JS实现具备延时功能的滑动门菜单效果
2015/09/17 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
2015/10/09 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
2018/01/31 Javascript
通过cordova将vue项目打包为webapp的方法
2019/02/02 Javascript
vue 插件的方法代码详解
2019/06/06 Javascript
layui按条件隐藏表格列的实例
2019/09/19 Javascript
[47:03]完美世界DOTA2联赛PWL S3 access vs LBZS 第一场 12.20
2020/12/23 DOTA
举例介绍Python中的25个隐藏特性
2015/03/30 Python
Python整型运算之布尔型、标准整型、长整型操作示例
2017/07/21 Python
pycharm远程调试openstack代码
2017/11/21 Python
运动检测ViBe算法python实现代码
2018/01/09 Python
Python在cmd上打印彩色文字实现过程详解
2019/08/07 Python
Python pysnmp使用方法及代码实例
2020/08/24 Python
详解CSS3中字体平滑处理和抗锯齿渲染
2017/03/29 HTML / CSS
HTML5 LocalStorage 本地存储详细概括(多图)
2017/08/18 HTML / CSS
波兰最大的电商平台:Allegro.pl
2021/02/06 全球购物
服务之星获奖感言
2014/01/21 职场文书
计算机毕业大学生求职信
2014/06/26 职场文书
网络营销计划书
2015/01/17 职场文书
辩论赛开场白大全(主持人+辩手)
2015/05/29 职场文书
2015年小学生暑假总结
2015/07/13 职场文书
办公室规章制度范本
2015/08/04 职场文书
酒桌上的祝酒词
2015/08/12 职场文书
vue @ ~ 相对路径 路径别名设置方式
2022/06/05 Vue.js