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

in 编程
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

一共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="https://my.oschina.net/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。

关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看