Django 没有检测到 AngularJS答案

【问题标题】：Django not detecting AngularJSDjango 没有检测到 AngularJS
【发布时间】：2016-10-21 22:01:03
【问题描述】：

我有一个 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>

-- home.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>tag 创建并使用Python 列表填充的下拉列表。我在我的选择标签中使用ng-model 以获取用户在下拉列表中选择的内容并将其显示在下方，但由于某种原因，当我在下拉列表中选择一个选项时，它没有显示任何内容。

另外，在我的 PyCharm IDE 中，home.html、ng-app 和 ng-model 内被突出显示，我收到一条警告说 Attribute ng-app/ng-model is not allowed here

你能告诉我我在这里做错了什么吗？

【问题讨论】：

标签： javascript python html angularjs django

【解决方案1】：

让我们看看...

在 header.html 中，您似乎没有定义 {% block content %}。如果没有定义，您的模板将无法继承任何内容。
在 home.html 中有一个额外的 html 包装。你不需要它。事实上，除了导入之外，扩展标签应该是文件中的第一个内容。
如果您打算添加像 {{ this }} 这样的角度绑定，请确保将可绑定内容包装在 {% 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 %}

【讨论】：

非常感谢您的解释和代码，现在可以完美运行了。