Javascript Django未检测到AngularJS_Javascript_Python_Html_Angularjs_Django

Javascript Django未检测到AngularJS

javascript python html angularjs django

Javascript Django未检测到AngularJS,javascript,python,html,angularjs,django,Javascript,Python,Html,Angularjs,Django,我有一个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" hr

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

在my home.html中，我有一个下拉列表，它是我使用标记创建的，并使用Python列表填充。我在我的选择标签中使用ng模型，以便获得用户在下拉列表中选择的内容并在下面显示，但由于某些原因，当我在下拉列表中选择一个选项时，它不会显示任何内容

另外，在我的PyCharm IDE中，home.html内部突出显示了ng app和ng model，我收到一条警告，指出此处不允许使用属性ng app/ng model

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

让我看看

在header.html中，似乎没有定义{%block content%}。如果没有定义，则模板无法继承任何内容

在home.html中，您有一个额外的html包装。你不需要它。事实上，除了导入之外，extends标记应该是文件中的第一个内容

如果要添加像{{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 %}

非常感谢您的解释和代码，它现在工作得非常好。