Flask和AngularJs

Question

Flask和AngularJs

我正在尝试将AngularJs实现到我的烧瓶项目中.在我的app.py中,我有这个代码来呈现一个测试网站:

@app.route('/test/')
def test():
    return render_template('test.html')

Run Code Online (Sandbox Code Playgroud)

在test.html我有这个:

<!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>

Run Code Online (Sandbox Code Playgroud)

当我输入输入字段时没有发生任何事情..我已检查angular.min.js是否正确加载.在app.py中我有什么需要做的才能完成这项工作吗？

Answer 1

Jor*_*ley 11

Flask使用jinja作为其使用的模板语言 {{ variable }}

所以当flask渲染时模板{{ yourname }}只是变成一个空字符串,因为你的名字不是当前渲染中的上下文变量

解决这个问题你可以使用flask-triangle http://flask-triangle.readthedocs.org/en/develop/tutorial/part1.html

它提供了模板过滤器

{{ yourname | angular }} 这将确保模板呈现正确的角度

你也可以在括号内使用转义括号(但我认为这更加丑陋)

{{ '{{ yourname }}' }}

Answer 2

Bur*_*E99 6

解决此问题的另一种方法是,您可以{% raw %}在顶部和{% endraw %}底部包装整个test.html内容.这将告诉jinja不要做任何特别的事情.如果您不打算使用jinja,这种方式只会很好.使用它也可以使它更好一点,因为你不再需要添加Joran Beasley建议的修复.

例:

{% raw %}
<!DOCTYPE html>
<html>
  <head>
    <!-- HEADER STUFF -->
  </head>
  <body>
    <!-- Normal AngularJS code and syntax -->
  </body>
</html>
{% endraw %}

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，2 月前
查看次数：	7035 次
最近记录：	9 年，10 月前