someone new someone new - 5 months ago 43
AngularJS Question

Django not detecting AngularJS

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