Javascript 带烧瓶的Angular.js错误_Javascript_Python_Angularjs_Flask

Javascript 带烧瓶的Angular.js错误

javascript python angularjs flask

Javascript 带烧瓶的Angular.js错误,javascript,python,angularjs,flask,Javascript,Python,Angularjs,Flask,我有以下结构和代码： project/ app.py templates/ /index.html static/ /angular.js index.html <!doctype html> <html ng-app="myApp"> <head> <meta charset="utf-8"/> <title>My A

我有以下结构和代码：

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>

无论我做什么，我仍然有以下错误：

UndefinedError:'ctrl'未定义

，我想这是因为Flask没有加载angular.js

我还尝试了静态路径

和

但是仍然没有成功。。。有什么想法吗？

当你把

{{ctrl.foo}}

在模板中，Jinja查找名为

ctrl

的上下文变量。您的

hello\u world

端点未提供任何此类变量

如果希望通过Angular而不是Jinja处理

ctrl

，则需要告诉Jinja在呈现的HTML中包含花括号。这可以通过以下方式完成

如果你不想要所有的花括号，你有几个其他的选择

您可以使用Jinja的

raw

和

endraw

指令精确地输出其内容

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

另一个选择是

这将允许您使用

[[ctrl.foo]]

我认为angular加载正确：错误“UndefinedError…”看起来是angular的。更重要的是，如果angular.js没有加载，在html上你会看到

{{ctrl.foo}

。html在控制台中运行良好，我在控制台中使用

debug=False尝试了typeof angular
，返回undefined。我还尝试了plnkr和python-MSimpleHttpServer，效果很好。所以剩下的唯一选择是烧瓶，我有点困惑…非常感谢！我确信错误与angular.js加载过程有关。PS：我将标题重命名为“Error Angular.js with Flask”，非常感谢……它救了我一天
{% raw %} {{ctrl.foo}} {% endraw %}

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

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

[[ctrl.foo]]