解决jinja2和angular的花括号{{}}冲突的方法。
2015-02-17 12:02
363 查看
一共3个方法,
A、http://flask-triangle.readthedocs.org/en/develop/tutorial/part1.html
上代码
app.py
templates/index.html:
B、C都是这里的:http://lorenhoward.com/blog/how-to-get-angular-to-work-with-jinja/
B、通过 verbatim 来暂停jinja2的解析
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。
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。
相关文章推荐
- 解决jinja2和angular的花括号{{}}冲突的方法.
- 解决jinja2 模板和AngularJS分隔符冲突的方法
- 使用vim编写c++对于输入输出流<<和<>括号匹配冲突的解决方法
- 简单名称空间冲突解决方法
- 解决IP地址冲突的完美方法(管理除外)--DHCP SNOOPING
- 安装SAPGUI后,再安装VS.Net出现冲突的解决方法
- Oracle与Tomcat端口冲突解决方法
- “无法解决 equal to 操作的排序规则冲突。”的错误分析和解决方法
- 重复提交及textbox和button事件冲突解决方法
- “无法解决 equal to 操作的排序规则冲突。”的错误分析和解决方法
- win2003 sp2跟卡巴冲突蓝屏解决方法
- [概念] 冲突解决方法(Confilct Resolution)
- 解决用VS.NET开发Web应用程序和Subversion的冲突 方法二
- 项目同时使用Prototypet和jQuery冲突解决方法
- 解决MASM32 9.0和卡巴斯基冲突的方法
- 金山词霸与卡巴冲突问题解决方法
- 关于DrCom上网客户端与Apache冲突的问题解决方法(更新)
- 电脑硬件资源的冲突与解决方法
- [概念] 冲突解决方法(Confilct Resolution)
- 解决IP地址冲突的方法--DHCP SNOOPING