烧瓶和AngularJs [英] Flask and AngularJs
问题描述
@ app.route（'/ test /'）
def test（）：
return render_template（'test.html'）
在test.html中，我有这个：
<！DOCTYPE html>
< html lang =endata-ng-app>
< head>
< meta charset =utf-8>
< script src =https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js>< / script>
< title> Flask-Triangle - 教程< / title>
< / head>
< body>
< label>名称：< / label>
< input type =textdata-ng-model =yourNameplaceholder =在此处输入名称>
< hr>
< h1> Hello {{yourName}}！< / h1>
< / body>
< / html>
当我在输入字段中输入时，什么都不会发生。
我已经检查angular.min.js被正确加载。
在app.py中有什么需要做的？
Flask使用jinja作为模板语言也使用 {{variable}}
所以当模板渲染模板 {{yourname}} 只是成为一个空字符串，因为yourname不是当前渲染中的上下文变量
要解决这个问题，您可以使用 flask-triangle
http：/ /flask-triangle.readthedocs.org/en/develop/tutorial/part1.html
它提供了一个模板过滤器
{{yourname |角度}} ，这将确保模板呈现正确的角度
你也可以使用括号内的转义括号（但这是更丑陋的我认为）
{{'{yourname}}'}}
I am trying to implement AngularJs to my flask project. In my app.py I have this code to render a test site:
@app.route('/test/')
def test():
return render_template('test.html')
And in the test.html I have this:
<!DOCTYPE html>
<html lang="en" data-ng-app>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/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 }}!</h1>
</body>
</html>
When I type in the input field nothing is happen.. I have checked that the angular.min.js is correctly loaded. Is there something I have to do in app.py to get this work?
Flask uses jinja as its templating language which also uses {{ variable }}
so when flask renders the templates {{ yourname }} just becomes an empty string since yourname is not a context variable in the current render
to fix this you can use flask-triangle
http://flask-triangle.readthedocs.org/en/develop/tutorial/part1.html
which provides a template filter
{{ yourname | angular }} that will ensure the template is rendered correct for angular
you could also use escaped brackets inside the brackets (but this is much uglier I think)
{{ '{{ yourname }}' }}
这篇关于烧瓶和AngularJs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
