CODEWITHSUNDEEP
angularjsdjango
Kishor Pawar
Kishor Pawar

Reputation: 3526

django template tags in ng-app element not working

So I have a code like below

base.html

{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        {% block title %}
            <title>Title</title>
        {% endblock title %}

        {% block basecss %}
            <link  href="{% static 'css/base.css' %}" type="text/css" rel="stylesheet" media="screen,projection">
        {% endblock basecss %}

        {% block css %}
        {% endblock css %}

    </head>

    <body id="login-page">

        {% block header %}
            {% include 'manage_header.html' %}
        {% endblock header %}

        {% block navigation %}
            {% include 'manage_navigation.html' %}
        {% endblock navigation %}

        {% block content %}
        {% endblock content %}

        {% block footer %}
        {% endblock footer %}

    </body>

    {% block basejs %}
        <script type = "text/javascript" src = "{% static 'js/jquery-1.11.2.min.js' %}"></script>

        <script src = "{% static 'jquery/jquery-ui.js' %}"></script>
        <script src = "{% static 'angular/underscore.js'%}"></script>
        <script src = "{% static 'angular/angular.js' %}"></script>
        <!-- <script src = "{% static 'angular/angular-route.js' %}"></script> -->
        <script src = "{% static 'angular/angular-ui-router.js' %}"></script>
        <script src = "{% static 'angular/restangular.js' %}"></script>

        <script type = "text/javascript" src = "{% static 'js/materialize.js' %}"></script>
        <script type = "text/javascript" src = "{% static 'js/perfect-scrollbar.min.js' %}"></script>

        <!--plugins.js - Some Specific JS codes for Plugin Settings--> 
        <script type = "text/javascript" src = "{% static 'js/plugins.min.js' %}"></script>

        <script type="text/javascript" src = "{% static 'js/custom-script.js' %}"></script>
    {% endblock basejs %}

    {% block js %}       
    {% endblock js %}

</html>

scene :1

{% block navigation %}
    {% include 'manage_navigation.html' %}
{% endblock navigation %}

{% block content %}
    <div ng-app="UserModule">
        <div ui-view="">
        </div>  
    </div>
{% endblock content %}

This works fine, but when I do below

scene :2

<div ng-app="UserModule">
    {% block navigation %}
        {% include 'manage_navigation.html' %}
    {% endblock navigation %}

    {% block content %}
        <div ui-view="">
        </div>  
    {% endblock content %}
</div>

It doesn't work at all.

I want to use scene :2, because that contains navigation bar and I want to call states defined in $stateProvider on click of menu items placed in navigation bar.

SOLUTION as per accepted answer 

{% block navigation %}
    <div ng-app="UserModule">
        {% include 'manage_navigation.html' %}
{% endblock navigation %}

{% block content %}
        <div ui-view="">
        </div>  
    </div>
{% endblock content %}

Upvotes: 0

Views: 156

Answers (1)

Daniel Roseman
Daniel Roseman

Reputation: 599778

You can't have anything outside blocks in a child template. Everything needs to be inside a block.

Upvotes: 2

Related Questions