Xcopy2015-07-09 11:04:56
Xcopy, 2015-07-09 11:04:56

AngularJS not working in Bootstrap modal. Why?

Hello! In order not to waste your time in vain, I will get straight to the point.
I have 2 files:

  • index.html - the main page of the site on which there is a "Login" button;
  • authorization_modal.html is the file whose content fills the modal window.

In index.html itself, Angular works (the code is converted in the body of the document to 2). But when I click on the "Enter" button and a modal window appears, it does not transform into anything and is displayed like that - that is, Angular does not want to work in the modal window.
I want to say right away that the type code {% … %}and etc in the listing below are part of the markup of the Django web framework, and it works as it should.
Button code in index.html:
<a href="{% url 'profile:authorization' %}" class="btn btn-outline btn-lg inverse" data-toggle="modal" data-target="#login_modal">Вход</a>
<!-- Modal HTML -->
<div class="modal fade" id="login_modal" tabindex="-1" role="dialog" aria-labelledby="login" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Content will be loaded here from "profile:authorization" url-->

Mobile window code authorization_modal.html:
{% load staticfiles extra_filters %}

<div class="modal-content">
    <div class="modal-body">

        <form method="POST" class="form-horizontal" ng-submit="submit()" ng-controller="AuthorizationController"> {% csrf_token %}
            {% for field in form %}
                <div class="form-group form-group-lg">
                    <label for="{{ field.id_for_label }}">{{ field.errors }}</label>
                    <input ng-model="{{ field.name }}" value="{% if field.value %}{{ field.value }}{% endif %}" type="{{ field|get_field_type }}"
                           class="form-control" name="{{ field.name }}" id="{{ field.id_for_label }}"
                           placeholder="{{ field.help_text }}" required>
            {% endfor %}

            <div class="modal-footer text-center">
                <button type="button" class="btn btn-default" data-dismiss="modal">Отмена</button>
                <button type="submit" id="submit" class="btn btn-default">Вход</button>

Angular code:
var app = angular.module('eworld_base_module', []);

app.config(function ($interpolateProvider) {
    // allow django templates and angular to co-exist

    function ($scope, $http) {
        $scope.namee = "Mihail";

        $scope.submit = function () {

            alert($scope.email + " " + $scope.password);

I tried to add the angular.min.js script connection directly to authorization_modal.html, but the console says an error that I am trying to connect the angular second time.
I tried to add ng-appit to authorization_modal.html but it didn't work either.
Maybe someone has an idea what I'm doing wrong?
Thank you very much in advance for your reply.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
Alexander Zolotykh, 2015-07-09

Use https://angular-ui.github.io/bootstrap/

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question