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

前言

大家应该都知道,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,没大问题。

总结

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

时间: 2016-12-18

python Django连接MySQL数据库做增删改查

1.下载安装MySQLdb类库http://www.djangoproject.com/r/python-mysql/2.修改settings.py 配置数据属性 复制代码 代码如下: DATABASES = {    'default': {        'ENGINE': 'django.db.backends.mysql', # Add 'postgresql_psycopg2', 'mysql', 'sqlite3' or 'oracle'.        'NAME': 'djang

使用python Django做网页

1 .创建一个django项目使用django-admin.py startproject MyDjangoSite 参考这里 2.建立视图from django.http import HttpResponsedef hello(request):    return HttpResponse("我的第一个简单的python django项目.")3.修改urls.py 我们为urlpatterns加上一行: (r'^hello/$', hello), 这行被称作URLpattern

Django中几种重定向方法

这里使用的是django1.5 需求: 有一个界面A,其中有一个form B, 前台提交B之后,后台保存数据之后,返回界面A,如果保存失败需要在A界面提示错误. 这里就需要后台的重定向,而且需要可以带着参数,也就是error message 这里收集了几种方法,简答说下需要那些包,怎么简单使用. 一. 使用HttpResponseRedirect The first argument to the constructor is required – the path to redirect to

angular.element方法汇总

addClass()-为每个匹配的元素添加指定的样式类名 after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点 append()-在每个匹配元素里面的末尾处插入参数内容 attr() - 获取匹配的元素集合中的第一个元素的属性的值 bind() - 为一个元素绑定一个事件处理程序 children() - 获得匹配元素集合中每个元素的子元素,选择器选择性筛选 clone()-创建一个匹配的元素集合的深度拷贝副本 contents()-获得匹配元素集合中每个元素的子元

教你安装python Django(图文)

安装环境:python版本2.7.5 ,win7系统安装Djangohttps://www.djangoproject.com/download/ 官方下载Django-1.5.5.tar.gz1,解压后(我的目录是D:\myapp\Django-1.5.5)2,DOS命令到刚解压后的Django-1.5.5目录下执行命令 python setup.py install , 结果如下图: 说明:Django安装命令实际是将Django复制到本地Python安装目录D:\Python27\Lib\

Django中更新多个对象数据与删除对象的方法

更新多个对象 例如说我们现在想要将Apress Publisher的名称由原来的"Apress"更改为"Apress Publishing".若使用save()方法,如: >>> p = Publisher.objects.get(name='Apress') >>> p.name = 'Apress Publishing' >>> p.save() 这等同于如下SQL语句: SELECT id, name, a

AngularJS内置指令

指令,我将其理解为AngularJS操作HTML element的一种途径. 由于学习AngularJS的第一步就是写内置指令ng-app以指出该节点是应用的根节点,所以指令早已不陌生. 这篇日志简单记录了一些内置指令,先使用起来,再谈一些有趣的东西. 内置指令 所有的内置指令的前缀都为ng,不建议自定义指令使用该前缀,以免冲突. 首先从一些常见的内置指令开始. 先列出一些关键的内置指令,顺便简单说说作用域的问题. ng-model 将表单控件和当前作用域的属性进行绑定,这么解释似乎也不太正确.

python Django模板的使用方法(图文)

模版基本介绍模板是一个文本,用于分离文档的表现形式和内容. 模板定义了占位符以及各种用于规范文档该如何显示的各部分基本逻辑(模板标签). 模板通常用于产生HTML,但是Django的模板也能产生任何基于文本格式的文档.来一个项目说明1.建立MyDjangoSite项目具体不多说,参考前面.2.在MyDjangoSite(包含四个文件的)文件夹目录下新建templates文件夹存放模版.3.在刚建立的模版下建模版文件user_info.html 复制代码 代码如下: <html>    <

Python+Django在windows下的开发环境配置图解

1         安装配置开发环境 1.1   准备安装 下载以下软件 Eclipse for C/C++ SUN JDK 1.6 不一定要1.6,1.5的也可以 Python3.1  Python2.6.4  Pythone2.5.2 mod_python-3.3.1.win32-py2.5-Apache2.2 MySQL-python-1.2.2.win32-py2.5 pysqlite-2.5.5.win32-py2.5 python.pydev.feature-1.5.0.125198

angular.foreach 循环方法使用指南

angular有自己的生命周期.循环给一个 angular监听的变量复值时.最好还是用angular自带的循环方法."angular.foreach" 格式: 复制代码 代码如下: var objs =[{a:1},{a:2}]; angular.forEach(objs, function(data,index,array){ //data等价于array[index] console.log(data.a+'='+array[index].a); }); 参数如下: objs:需要

angular forEach方法遍历源码解读

angular中提供了forEach()方法用于遍历对象或数组,供大家参考,具体内容如下 function forEach(obj, iterator, context) { var key, length; if (obj) { if (isFunction(obj)) { for (key in obj) { // Need to check if hasOwnProperty exists, // as on IE8 the result of querySelectorAll is an

Java for-each循环使用难题2例(高级使用方法)

Java中,for-each循环简化了任何Collection或array的遍历过程,但并不是每个Java程序员都了解本文将要描述的for-each 循环的一些细节.与 Java5 发布的其他术语:释放别名泛型,自动封装和可变参数不同,Java开发者对for-each循环的使用比任何其他特性更加频繁,但当问及高级的for-each循环怎样工作,或什么是在for-each循环中使用Collection时的基本需求时,就不是每个人都能够回答的了. 本篇教程和例子旨在通过深入研究for-each 循环

全面解析JavaScript里的循环方法之forEach,for-in,for-of

JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能. JavaScript诞生已经有20多年了,我们一直使用的用来循环一个数组的方法是这样的: for (var index = 0; index < myArray.length; index++) { console.log(m

vue forEach循环数组拿到自己想要的数据方法

如下所示: <el-checkbox v-for="(item) in jurisdictionContent" :label="item.id" :key="item.id" class="checkboxMargin"> <span>{{item.value}}{{item.checked}}</span> </el-checkbox> handleJurisdiction(

JavaScript使用类似break机制中断forEach循环的方法

JavaScript数组对象,有一个forEach方法,可枚举每一个数组元素,但并不支持类似for循环的break语法,中断循环: [1,2,3].forEach(function(item) { // if(!item) break; 不支持 }); 解决办法,可抛出一个特殊异常,来中断forEach循环,原理: var BreakException = {}; try { [1, 2, 3].forEach(function(el) { console.log(el); if (el ===

angularJS 中$scope方法使用指南

复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <script src="http://localhost:81/js/jquery.js"> </script> <script src="http://lo

详解JAVA中的for-each循环与迭代

在学习java中的collection时注意到,collection层次的根接口Collection实现了Iterable<T>接口(位于java.lang包中),实现这个接口允许对象成为 "foreach" 语句的目标,而此接口中的唯一方法,实现的就是返回一个在一组 T 类型的元素上进行迭代的迭代器. 一.迭代器Iterator 接口:Iterator<T> public interface Iterator<E>{ boolean hasNext

C#使用foreach循环遍历数组完整实例

本文实例讲述了C#使用foreach循环遍历数组的方法.分享给大家供大家参考,具体如下: using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace ConsoleApplication1 { class Program { static void Main(string[] args) { //声明数组. 第一种方法. 声明并分配元素大小. int[] Myint

深入了解java8的foreach循环

虽然java8出来很久了,但是之前用的一直也不多,最近正好学习了java8,推荐一本书还是不错的<写给大忙人看的javase8>.因为学习了Java8,所以只要能用到的地方都会去用,尤其是Java8的Stream,感觉用起来觉得很方便,因为点点点就出来了,而且代码那么简洁.现在开始慢慢深入了解java8,发现很多东西不能看表面. 比如常规遍历一个集合,下面给出例子: 1.首先遍历一个List 方式1.一开始是这样的: public static void test1(List<Strin