解决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 相关文章推荐
对YUI扩展的Gird组件 Part-1
Mar 10 Javascript
你必须知道的Javascript知识点之&quot;字面量和对应类型&quot;说明介绍
Apr 23 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
May 22 Javascript
Javascript中设置默认参数值示例
Sep 11 Javascript
JavaScript实现更改网页背景与字体颜色的方法
Feb 02 Javascript
jQuery中大家不太了解的几个方法
Mar 04 Javascript
JS替换字符串中空格方法
Apr 17 Javascript
Jquery轮播效果实现过程解析
Mar 30 Javascript
功能强大的Bootstrap组件(结合js)
Aug 03 Javascript
AngularJs  Using $location详解及示例代码
Sep 02 Javascript
微信小程序class封装http代码实例
Aug 24 Javascript
layui form.render('select', 'test2') 更新渲染的方法
Sep 27 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下载excel无法打开的解决方法
2013/12/24 PHP
php的ajax简单实例
2014/02/27 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
firefox中用javascript实现鼠标位置的定位
2007/06/17 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
2013/05/07 Javascript
使用GruntJS构建Web程序之构建篇
2014/06/04 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
2014/06/24 Javascript
浅谈javascript中自定义模版
2015/01/29 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
2015/03/26 Javascript
JS模式之单例模式基本用法
2015/06/30 Javascript
Javascript中引用类型传递的知识点小结
2017/03/06 Javascript
微信小程序 五星评价功能的实现
2017/03/09 Javascript
vue2.0全局组件之pdf详解
2017/06/26 Javascript
JavaScript使用Ajax上传文件的示例代码
2017/08/10 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
2018/08/27 Javascript
node基于async/await对mysql进行封装
2019/06/20 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
2020/04/27 Javascript
Threejs实现滴滴官网首页地球动画功能
2020/07/13 Javascript
js数组中去除重复值的几种方法
2020/08/03 Javascript
[00:36]我的中国心——Serenity vs Fnatic
2018/08/21 DOTA
python实现socket客户端和服务端简单示例
2014/02/24 Python
栈和队列数据结构的基本概念及其相关的Python实现
2015/08/24 Python
Python实现随机生成手机号及正则验证手机号的方法
2018/04/25 Python
python模式 工厂模式原理及实例详解
2020/02/11 Python
django执行原始查询sql,并返回Dict字典例子
2020/04/01 Python
Python的3种运行方式:命令行窗口、Python解释器、IDLE的实现
2020/10/10 Python
HTML5的结构和语义(2):结构
2008/10/17 HTML / CSS
HTML5重塑Web世界它将如何改变互联网
2012/12/17 HTML / CSS
Html5移动端网页端适配(js+rem)
2021/02/03 HTML / CSS
卡骆驰英国官网:Crocs英国
2019/08/22 全球购物
亚洲在线旅行门户网站:Expedia.com.hk(智游网)
2020/04/14 全球购物
大学生职业生涯规划范文——找准自我,定位人生
2014/01/23 职场文书
2014年大学生工作总结
2014/11/20 职场文书
2015年医务人员医德医风自我评价
2015/03/03 职场文书
九年级数学教学反思
2016/02/17 职场文书
暑假开始了,你的暑假学习计划写好了吗?
2019/07/04 职场文书