文档章节

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

Klaus88
 Klaus88
发布于 2015/02/17 12:02
字数 275
阅读 4294
收藏 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
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
11/09
0
0
AngularJS笔记之ng-bind指令

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

陈佳庆
2014/06/30
0
3
Angular中ui-grid的使用详解

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

半指温柔乐
08/05
0
0
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.1K
26
AngularJs学习笔记--expression

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

武文海
2015/02/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

/etc/profile和/etc/environment的区别

/etc/profile 文件 当一个用户登录Linux系统或使用 su 命令切换到另一个用户时,设置用户环境第一个读取的文件就是 /etc/profile ,此文件为系统全局变量配置文件,且仅仅在第一次登录系统时...

calmsnow
19分钟前
2
0
rabbitMQ日常管理(转)

一、网页登录方法 http://127.0.0.1:15672/ 用户名和密码默认为guest/guest 用java代码去连接rabbitmq用的端口是5672 二、rabbitMQ基本概念 RabbitMQ是一个开源的AMQP实现,服务器端用Erlan...

__HuWei
26分钟前
1
0
gitlab cicd

https://docs.gitlab.com/ee/ci/docker/using_docker_build.html

kut
26分钟前
1
0
使用Prometheus+Grafana监控

一、介绍Prometheus Prometheus(普罗米修斯)是一套开源的监控&报警&时间序列数据库的组合,起始是由SoundCloud公司开发的。随着发展,越来越多公司和组织接受采用Prometheus,社会也十分活...

xtof
27分钟前
3
0
EOS RPC API官方文档中文版【1.5版】

EOS RPC API是应用访问EOS区块链上智能合约的必备开发接口,根据所实现插件的不同,EOS RPC API被归入不同的分组: CHAIN:由chain_api_plugin实现,主要提供区块链数据的访问功能 HISTORY:...

汇智网教程
29分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部