Question

我有以下结构和代码：

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>

但仍然没有成功......任何想法？

Answer 1

当你把

{{ctrl.foo}}

在模板中，Jinja会查找名为ctrl的上下文变量。您的hello_world端点不提供任何此类变量。

如果您希望Angular而不是Jinja处理ctrl，您需要告诉Jinja在呈现的HTML中包含花括号。这可以通过surrounding what you have in additional curly braces完成。

{{ '{{ctrl.foo}}' }}

如果你不想要所有花括号，你还有其他几种选择。

您可以使用Jinja的raw和endraw指令完全按照提供的方式输出其内容。

{% raw %} {{ctrl.foo}} {% endraw %}

另一个选项是change the symbols Angular looks for。

var app = angular.module('myApp', []);

app.config(['$interpolateProvider', function($interpolateProvider) {
  $interpolateProvider.startSymbol('[[');
  $interpolateProvider.endSymbol(']]');
}]);

这将允许您使用

[[ctrl.foo]]

使用Flask错误Angular.js

1 个答案: