AngularJS 指令似乎不适用于 Python Flask

Question

尽管我的问题可能很常见，但我找不到明确的答案。我是 AngularJS 的初学者，有一个非常简单的代码不起作用，实际上我的所有指令都不起作用。这是我的小项目

/templates
    -index.html
    -header.html
    -script.js
mainapp.py

在index.html中有

<!DOCTYPE html>
<html data-ng-app>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>
    <div data-ng-include="'header.html'"></div>
</body>
</html>

在header.html

<div> I'm supposed to see this </div>

和mainapp.py

from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def mainpage():
    return render_template("index.html")

if __name__ == "__main__":
    app.run(debug=True)

script.js

中没有内容

当我运行 mainapp.py 我期待看到 "I'm supposed to see this" 但我没有，因为指令似乎不起作用。但是，如果我单独尝试 html 代码（例如在 Plunker 上），它工作正常。

我想我需要做一些配置，但我不知道是什么，有什么想法吗？（如果有人可以解释为什么它不起作用，那就太好了）

请注意，在我的指令之前使用 data- 不会改变问题。

谢谢

Answer 1

这个问题与 Flask 如何处理静态文件和模板有关。 header.html 文件在您的情况下实际上是一个静态文件，而不是 Flask 模板。

将您的目录结构更改为：

├── mainapp.py
├── static
│   └── partials
│       └── header.html
└── templates
    └── index.html

然后将 ng-include 更新为：

<div data-ng-include="'header.html'"></div>

如果是我，我什至不会使用 "templates" 目录。只需从静态目录提供您的 index.html 文件，以便当最终用户点击主要 / 路由时，Angular 接管。然后，您可以通过对 RESTful API.

发出 AJAX 请求来与服务器端交互

AngularJS 指令似乎不适用于 Python Flask

AngularJS directives don't seem to work with Python Flask

python

directive