2015-08-21 3 views
2

Я пытаюсь реализовать AngularJs в моем проекте с флягой. В моей app.py у меня есть этот код для отображения на сайте тест:Flask and AngularJs

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

И в 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> 

Когда я печатаю в поле ввода ничего не происходит. . Я проверил правильность загрузки angular.min.js. Есть ли что-то, что я должен сделать в app.py, чтобы получить эту работу?

ответ

9

Колба использует дзиндзя в качестве языка шаблонного который также использует {{ variable }}

так, когда колба делает шаблоны {{ yourname }} просто становится пустой строкой, так как вашеимя не является переменным контекстом в текущей визуализации

, чтобы исправить это вам можно использовать flask-triangle http://flask-triangle.readthedocs.org/en/develop/tutorial/part1.html

, который обеспечивает шаблон фильтра

{{ yourname | angular }}, что обеспечит шаблон оказывается правильным для углового

вы можете также использовать сбежавшую скобку внутри скобок (но это гораздо уродливее, я думаю)

{{ '{{ yourname }}' }}

+0

Это сработало! спасибо – EspenG

4

Другим способ исправить это, что вы можно обернуть содержимое test.html {% raw %} вверху и {% endraw %} внизу. Это будет означать, что джинджи не сделает ничего особенного в этом. Таким образом будет только быть хорошим, если вы не планируете использовать jinja вообще. Использование этого также сделает его более приятным для записи, поскольку вам больше не нужно добавлять исправления, которые Joran Beasley suggested.

Пример:

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