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

一共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。

时间: 2024-10-18 13:49:12

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

es6引用模块import后面加上花括号{}和不加花括号的区别

在使用import语法引用模块时,如何正确使用{} 例如:有两个文件,home.js.user.js 当需要在home.js中引入user.js的时候 //home.js import user from './user'; 对于上面的这种引入方法,只有user.js文件中需要提供默认的export defulat进行导出(必须是默认导出)这样在home.js文件中就可以使用user了.如下 //user.js export default 'nihao' 在这种不使用{}来引用模块的情况下,i

C/C++中无条件花括号的妙用

C/C++中无条件花括号可以形成一个代码块,一个作用域.可以使括号内定义的变量就只在本域(就是这个大括号)内有效,而且不会影响其他域,即使名字相同. 在花括号内,如果变量前面带类型,则相当于新创建一个变量,作用域只在花括号内,变量前面不带类型,会屏蔽掉外层代码块名字相同的变量: 对我来说,可以缓解临时变量取名的头疼问题. 总结一下: 1.形成代码块,代码可读性大大提高. 形如: int fun(...) { //该段处理什么什么什么 { …… } //该段处理什么什么什么 { …… } //该段

关于《python基础教程》字符串章节例子的多个花括号问题

先把源码贴上: # 根据指定宽度打印格式良好的价格列表 width = int(input('Please enter width')) price_width = 10 item_width = width - price_width header_fmt = '{{:{}}}{{:>{}}}'.format(item_width, price_width) fmt = '{{:{}}}{{:>{}.2f}}'.format(item_width, price_width) print('=

C语言::验证花括号成对出现

题目要求 编写一个程序,它从标准输入(终端)读取C源代码,并验证所有的花括号都正确的成对出现. 注意:你不必担心注释内部.字符串常量内部和字符常量形式的花括号. 算法分析 我们先判断左花括号的数量是否相等. 如果左右花括号数量不等,肯定不成对! 如果左右花括号数量相等,一定就成对吗??? 好像也不一定. 我们来举例分析一下,左右花括号相等时可能会出现的情况: 1.{{{{{}}}}}(匹配) 2.{}{}{}{}{}(匹配) ... 3.}}}}}{{{{{(不匹配) 4.{{{{}}}}}{(

*4 通配符及管道与反引号“`”与花括号“{}”的使用

作业4: 一.通配符练习: 1.显示/etc目录下,以字母开头,后面跟了一个非字母及其它任意长度任意字符的文件或目录: ll -dh /etc/[[:alpha:]][^[:alpha:]]* drwxr-xr-x. 6 root root 4.0K 3月   6 17:22 /etc/X11 2.显示/usr/share/man目录下,所有以man开头,后跟一个数字结尾的文件或目录: ll -dh /usr/share/man/man[0-9] drwxr-xr-x. 2 root root

简单C编程题-同位相同的N项之和/标准输入花括号成对判断/行号行输出

//求Sn=a+aa+aaa+aaaa+aaaaa的前5项之和,其中a是一个数字,例如:2+22+222+2222+22222 #include <stdio.h> int main() { int a,n,sum; int i,j; sum = 0; printf("请输入项数和a的值"); scanf("%d%d",&a,&n); j = a; for(i = 1;i <= n;i++) { sum = sum+a; a = j

SourceTree + Beynod Compare解决Git冲突的方法

采用可视化SourceTree插件beyondCompare解决冲突 1.构造冲突 (1)修改了server.xml文件的第40行内容并且提交推送到远程库上: (2)另外一个工作目录下也修改了该文件的低40行内容,并且也要推送到远程库上去: 推送的时候出现如下问题: git -c diff.mnemonicprefix=false -c core.quotepath=false push -v --tags origin master:master Pushing to [email prote

php中花括号的使用

一.界定变量名 注:花括号内若左侧出现空格,则会当做普通花括号来解析. 二.界定表达式 1.获取字符串中某个字符  如:$str='abcdefg'; echo $str{0};//a 效果等同于$str[0]; 2.作为表示下标的方法定义数组  如:$arr = []; $arr{10}=4; print_r($arr);//array([10]=>4)

没有花括号(大括号)的for循环也能正确执行

代码一 for循环没有{}大括号(花括号),在for语句下面是一条语句. for(var i=0;i<3;i++) console.log(1,i); 上面的代码能无误输出: 1 01 11 2 代码二 那么,如果没有花括号的for循环下有多行语句呢? for(var i=0;i<3;i++) console.log(1,i); console.log(2) 输出: 1 01 11 22 他不会把第二行也循环. 代码三 for(var i=0;i<3;i++) console.log(1