文档章节

解决jinja2和angular的花括号{{}}冲突的方法。

Klaus88
 Klaus88
发布于 2015/02/17 12:02
字数 275
阅读 4177
收藏 29

一共3个方法,

A、http://flask-triangle.readthedocs.org/en/develop/tutorial/part1.html

上代码

app.py

from flask import Flask, render_template
from flask.ext.triangle import Triangle

    app = Flask(__name__, static_path='/static')
    Triangle(app)

    @app.route('/')def index():
        return render_template('index.html')if __name__ == '__main__':
        app.run()

templates/index.html:

<!DOCTYPE html>
 <html data-ng-app>
 <head>
 <meta charset="utf-8">
 <script src="/static/js/angular.min.js"></script>
 <title>Flask-Triangle - Tutorial</title>
 </head>
 <body>
 <label>Name:</label>
 <input type="text" data-ng-model="yourName" placeholder="Enter a name here">
 <hr>
 <h1>Hello {{yourName|angular}}!</h1>
 </body>
 </html>


B、C都是这里的:http://lorenhoward.com/blog/how-to-get-angular-to-work-with-jinja/

B、通过 verbatim 来暂停jinja2的解析

{% raw %}
<h1 class="user-name">{{ user.name }}</h1>
{% endraw %}

C、修改angular的符号

On the front end, after instantiating our Angular app, we can tell Angular to look for different binding tags (instead of '{{' and '}}'). 

var app = angular.module('myApp', []);

app.config(['$interpolateProvider', function($interpolateProvider) {
  $interpolateProvider.startSymbol('{[');
  $interpolateProvider.endSymbol(']}');
}]);

The above code snippet tells angular to look for '{[' as a an opening tag, and ']}' for a closing tag.

Now we can use both Angular and Jinja together at the same time:

<h1 class="{{ some_class }}">{[ foo.bar ]}</h1>

As one can see, the h1 element's class will be rendered in the backend via Jinja and Flask / Django.  When it's sent to the browser, it might look like this:

<h1 class="some-class">{[ foo.bar ]}</h1>

From there, Angular will see that '{[ foo.bar ]}' should be a binding and will update the view accordingly.


我的项目用angular比较少,所以我选择了B。

© 著作权归作者所有

共有 人打赏支持
Klaus88
粉丝 5
博文 15
码字总数 7457
作品 0
南宁
高级程序员
加载中

评论(1)

cableyang
cableyang
Yyyy
Angular中ui-grid的使用详解

Angular中ui-grid的使用   在项目开发的过程中,产品经理往往会提出各种需求,以提高用户体验。最近,项目中用到的表格特别多,而且表格的列数和行数也超多。为了让用户浏览更爽,产品经理...

半指温柔乐
08/05
0
0
AngularJs学习笔记--expression

一、Angular表达式 vs. Js 表达式   这很容易让人将angular视图表达式联想为javascript表达式,但这并不完全正确,因为angular不是通过javascript的eval()对表达式进行求值。你可以将angul...

武文海
2015/02/06
0
0
AngularJS笔记之ng-bind指令

在AngularJS中显示模型中的数据有两种方式: 一种是使用花括号插值的方式: <p>{{text}}</p> 另一种是使用基于属性的指令,叫做ng-bind: <p ng-bind="text"></p> 这两种方式的效果都是一样的...

陈佳庆
2014/06/30
0
3
Angular.js 相关记录

AngularJS作用域文档:http://docs.angularjs.org/api/ng.$rootScope.Scope ng-view 指令的角色是为当前路由把对应的视图模板载入到布局模板中。 AngularJS内置过滤器:http://code.angular...

彭博
2014/04/25
0
2
angular js 自学笔记(一)

js中的mvc mvc设计模式,简单说来是将复杂的代码设计规范化,把应用的输入,处理,输出分开,M是指数据模型,V是指用户界面,C则是控制器。像我刚接触的SSH框架中,例如struts,就是利用mvc的...

烽穹寒渊
2015/03/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

shell特殊符号、cut、sort、uniq、wc、tee、tr、split命令

10月15日任务 8.10 shell特殊符号cut命令 8.11 sort_wc_uniq命令 8.12 tee_tr_split命令 8.13 shell特殊符号下 cut 命令 cut作用:截取字符串 用法如下:cat /etc/passwd |head -2 |cut -d ...

hhpuppy
22分钟前
0
0
Springboot实现filter拦截token验证和跨域

背景 web验证授权合法的一般分为下面几种 1使用session作为验证合法用户访问的验证方式 使用自己实现的token 使用OCA标准 在使用API接口授权验证时,token是自定义的方式实现起来不需要引入其...

funnymin
56分钟前
2
0
linux使用ntfs-3g操作ntfs格式硬盘

Linux内核目前只支持对微软NTFS文件系统的读取。 NTFS-3G 是微软 NTFS 文件系统的一个开源实现,同时支持读和写。NTFS-3G 开发者使用 FUSE 文件系统来辅助开发,同时对可移植性有益。 安装 ...

linuxprobe16
今天
1
0
kubeadm部署kubernetes集群

一、环境要求 这里使用RHEL7.5 master、etcd:192.168.10.101,主机名:master node1:192.168.10.103,主机名:node1 node2:192.168.10.104,主机名:node2 所有机子能基于主机名通信,编辑...

人在艹木中
今天
14
0
Shell特殊符号总结以及cut,sort,wc,uniq,tee,tr,split命令

特殊符号总结一 * 任意个任意字符 ? 任意一个字符 # 注释字符 \ 脱义字符 | 管道符 # #号后的备注被忽略[root@centos01 ~]# ls a.txt # 备注 a.txt[root@centos01 ~]# a=1[root@centos01...

野雪球
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部