Ore*_*lus 3 javascript python flask angularjs
我有以下结构和代码:
project/
app.py
templates/
/index.html
static/
/angular.js
的index.html
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="utf-8"/>
<title>My App</title>
</head>
<body ng-controller="myCtrl as ctrl">
<div>
{{ctrl.foo}}
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script type="text/javascript">
angular.module('myApp', [])
.controller('myCtrl', [function () {
var self = this;
self.foo = 10;
}]);
</script>
</body>
</html>
和app.py.
from flask import Flask
app = Flask(__name__)
from flask import render_template
@app.route('/')
def hello_world():
return render_template('index.html')
if __name__ == '__main__':
app.run(debug=True)
无论我做什么,我仍然有以下错误:UndefinedError: 'ctrl' is undefined我猜是因为Flask没有加载angular.js
我也试过静态路径
<script type=text/javascript src="{{url_for('static', filename='angular.js')}}"></script>
和
<script type=text/javascript src="../static/angular.js"></script>
但仍然没有成功......任何想法？
当你放
{{ctrl.foo}}
在你的模板中,Jinja寻找一个名为的上下文变量ctrl.您的hello_world端点不提供任何此类变量.
如果您希望ctrl由Angular而不是Jinja处理,您需要告诉Jinja在呈现的HTML中包含花括号.这可以通过包围你在其他花括号中的内容来完成.
{{ '{{ctrl.foo}}' }}
如果你不想要所有花括号,你还有其他几个选择.
您可以使用Jinja raw和endraw指令完全按照提供的方式输出其内容.
{% raw %} {{ctrl.foo}} {% endraw %}
另一个选项是更改Angular查找的符号.
var app = angular.module('myApp', []);
app.config(['$interpolateProvider', function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
}]);
这将允许您使用
[[ctrl.foo]]
| 归档时间： |
|
| 查看次数： |
830 次 |
| 最近记录： |