Я пытаюсь добавить модальное окно, которое появляется, когда пользователь нажимает на элемент, созданный следующим образом:
<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>
@Lex отредактировал сообщение, включив в него ссылки.
Я не уверен, что материал ui-bootstrap работает с bootstrap 4.x. Может быть, попробуйте сослаться на версию 3.x bootstrap css?



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


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