Модальный интерфейс Angular не отображается

Я пытаюсь добавить модальное окно, которое появляется, когда пользователь нажимает на элемент, созданный следующим образом:

<li ng-repeat = "task in tasks | filter:{Status: 0}" class = "list-group-item list-group-item-danger" ng-click = "getTask(task)">

Это функция getTask:

    $scope.getTask = function (task) {
        taskService.getTask(task.Id)
            .then(task => {
                var modalInstance = $uibModal.open({
                    animation: true,
                    templateUrl: "Content/partials/TaskModal.html",
                    controller: "taskModalController",
                    resolve: {
                        task: function () {
                            return task
                        }
                    }
                });

                modalInstance.result.then(task => {
                    if (task)
                        updateTask(task); 
                });
            })
    };

А шаблон - это просто div с формой в нем.

<div class = "panel panel-primary">
    <div class = "panel-heading">Edit Task</div>
    <div class = "panel-body">
        <form name = "EditTask" ng-submit = "saveTask()" class = "form-inline mb-5">
            <div class = "form-group col-lg-4">
                <label for = "Assignee">Assignee</label>
                <input type = "text" name = "Assignee" class = "form-control" required ng-model = "EditTask.Assignee" ng-minlength = "5" />
            </div>
            <div class = "form-group col-lg-4">
                <label for = "Assignment">Assignment</label>
                <input type = "text" name = "Assignment" class = "form-control" ng-model = "EditTask.Assignment" required ng-minlength = "5" />
            </div>
            <div class = "form-group col-lg-4">
                <input type = "submit" name = "Save" value = "Save" class = "btn btn-success btn-lg"
                       ng-disabled = "EditTask.$invalid" />
            </div>
        </form>
    </div>
</div>

При нажатии на элемент фактически создается модальное окно, однако оно полностью невидимо. Кнопки можно нажимать, и указатель изменяется при наведении на них курсора, и проверка файла показывает, что информация передана правильно.

Что мне здесь не хватает, что мешает мне показать это модальное окно?

Редактировать:

В head у меня есть ссылки CSS:

<link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel = "stylesheet" crossorigin = "anonymous">
<link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.0.13/css/all.css" crossorigin = "anonymous">

А внизу тела скрипты:

<script src = "/bower_components/angular/angular.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-animate.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-sanitize.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<script src = "~/Content/js/app.js"></script>
<script src = "~/Content/js/directives.js"></script>

Давайте посмотрим на ваш скрипт и ссылки на css для ui-bootstrap.

Lex 17.05.2018 22:31

@Lex отредактировал сообщение, включив в него ссылки.

Danyx 17.05.2018 23:03

Я не уверен, что материал ui-bootstrap работает с bootstrap 4.x. Может быть, попробуйте сослаться на версию 3.x bootstrap css?

Lex 17.05.2018 23:42
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
3
316
0

Другие вопросы по теме