Django not detecting AngularJS
Question: I have a Django project (that I created using PyCharm IDE). I have two HTML
files and below is the code I have in those files.

\-- 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>
    

In my `home.html`, I have a dropdown that I created using `<select>`tag and is
populated using a Python list. I am using `ng-model` in my select tag in order
to get what user chooses in the dropdown and display it below but for some
reason, it's not displaying anything when I select an option in the dropdown.

Also, in my PyCharm IDE, inside `home.html`, `ng-app` and `ng-model` are
highlighted and I get a warning saying that `Attribute ng-app/ng-model is not
allowed here`

Can you please tell me what I am doing wrong here?


Answer: Let's see...

  1. In header.html you seem to have no `{% block content %}` defined. There is nothing your template can inherit if no defined.

  2. in home.html you have an additional html wrapping. You don't need it. In fact AFAIK the extends tag should be the first content in the file, aside from imports.

  3. If you intend to add angular bindings like `{{ this }}`, ensure you wrap the bindable content in `{% verbatim %}` tags since the same syntax is used for django templates rendering.

Said this, I'd fix your templates like this:

Header:

    
    
    {% 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>
    

The home file will be:

    
    
    {% 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 %}
    

