Угловой модальный интерфейс не отображается - PullRequest
Новая
       9

Угловой модальный интерфейс не отображается

0 голосов
/ 17 мая 2018

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

<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>
...