我有一个 Django 项目(我使用 PyCharm IDE 创建的)。我有两个 HTML 文件，下面是我在这些文件中的代码。
-- header.html
<!DOCTYPE html>
<html lang="en" >
<head>
<title>This is my title</title>
<meta charset="UTF-8">
{% load staticfiles %}
<link rel="stylesheet" href="{% static 'css/style.css' %}" type="text/css"/>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<script data-require="angular.js@*" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<script src="{% static 'js/script.js' %}"></script>
-- 主页.html
<html ng-app="myApp">
{% extends "query/header.html" %}
{% block content %}
<p>Hey what's up</p>
<select name="dropDown" ng-model="data.dropDown" >
{% for num in list %}
<option value="num">
{{ num }}
</option>
{% endfor %}
</select>
<p>You chose: {{ data.dropDown }}</p>
{% endblock %}
</html>
在我的 home.html ，我有一个使用 <select> 创建的下拉菜单标记并使用 Python 列表填充。我正在使用 ng-model在我的选择标签中，以获取用户在下拉列表中选择的内容并将其显示在下方，但由于某种原因，当我在下拉列表中选择一个选项时，它没有显示任何内容。
此外，在我的 PyCharm IDE 中，在 home.html 中, ng-app和 ng-model被突出显示，我收到一条警告说 Attribute ng-app/ng-model is not allowed here
你能告诉我我做错了什么吗？
最佳答案
让我们看看...
在 header.html 中，您似乎没有定义
{% block content %}。如果没有定义，您的模板将无法继承。在 home.html 中，您有一个额外的 html 包装。你不需要它。事实上，据我所知，extends 标签应该是文件中除导入之外的第一个内容。
如果您打算添加像
{{ this }}这样的 Angular 绑定(bind)，请确保将可绑定(bind)内容包装在{% verbatim %}标签中，因为相同语法用于 django 模板渲染。
这么说，我会像这样修复你的模板:
标题:
{% load staticfiles %}
{# PLEASE add template tags imports at the beginning of the file #}
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<!-- PLEASE ACCURATELY INDENT YOUR CODE!!!! -->
<!-- I hope you have myApp defined in js/script.js file -->
<head>
<title>This is my title</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="{% static 'css/style.css' %}" type="text/css"/>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<script data-require="angular.js@*" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<script src="{% static 'js/script.js' %}"></script>
<!-- PLEASE FOR GOD\'S SAKE MAKE A COMPLIANT HTML FILE!!!!!! I DONT KNOW WHAT IS THE REMAINING FILE BODY BUT I WILL ADD IT RIGHT NOW IN A MINIMALIST WAY -->
</head>
<body>
{% block content %}{% endblcok %}
</body>
</html>
主文件将是:
{% extends "query/header.html" %}
{% block content %}
<p>Hey what's up</p>
<select name="dropDown" ng-model="data.dropDown">
{% for num in list %}
<option value="num">{{ num }}</option>
{% endfor %}
</select>
{% verbatim %}
<p>You chose: {{ data.dropDown }}</p>
{% endverbatim %}
关于javascript - Django 没有检测到 AngularJS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37926050/