AngularJS ui.bootstrap modal dialog is not showing

Question

I have already seen this question: AngularJS bootstrap.ui modal not showing . But any of those answers didn't help me.

I'm trying to display modal dialog using ui.bootstrap module. This is my index.html page

<!doctype html>
<html lang="en" ng-app="app">

    <head>
        <title>Title</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
    </head>

    <body ng-controller="Controller">
        <button type="button" class="btn btn-info" ng-click="open()">Open</button>

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
        <script src="lib/angular.js"></script>
        <script src="lib/ui-bootstrap-tpls.js"></script>
        <script>
            angular
                .module("app", ["ui.bootstrap"])
                .controller("Controller", function ($scope, $uibModal) {
                    $scope.open = function () {
                        $uibModal.open({
                            ariaLabelledBy: 'modal-title',
                            ariaDescribedBy: 'modal-body',
                            templateUrl: 'modal.template.html',
                            controller: 'ModalController',
                            resolve: {
                                users: function () {
                                    return [
                                        { id: 1, name: "aaa" },
                                        { id: 2, name: "bbb" },
                                        { id: 3, name: "ccc" }
                                    ];
                                }
                            }
                        }).result.then(
                            function (result) {
                                console.log(result);
                            },
                            function () {
                                console.log("Modal dialog dismissed!");
                            }
                        );
                    }
                })
                .controller("ModalController", function ($scope, $uibModalInstance) {
                    $scope.ok = function () {
                        $uibModalInstance.close("Modal dialog successfully closed!");
                    }

                    $scope.cancel = function () {
                        $uibModalInstance.dismiss("cancel");
                    }
                });
        </script>
    </body>

</html>

modal.template.html

<div class="modal-header">
    <h3 class="modal-title" id="modal-title">Modal Title</h3>
</div>
<div class="modal-body" id="modal-body">
    <ul>
        <li ng-repeat="user in users">{{user}}</li>
    </ul>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-primary" ng-click="ok()">Ok</button>
    <button type="button" class="btn btn-light" ng-click="cancel()">Cancel</button>
</div>

I don't see any errors in the console, but the modal dialog is not showing.

Move all script tags into head section

barbsan
– barbsan

2018-09-28 12:39:06 +00:00
Commented Sep 28, 2018 at 12:39 — barbsan
– barbsan, Commented Sep 28, 2018 at 12:39
@barbsan didn't help

not a Programmer
– not a Programmer

2018-09-28 12:54:56 +00:00
Commented Sep 28, 2018 at 12:54 — not a Programmer
– not a Programmer, Commented Sep 28, 2018 at 12:54

barbsan · Accepted Answer · 2018-09-28 13:09:32Z

1

There are some issues in your code:

Move all <script> tags into head section.
ui-bootstrap-tpl is compatible with bootstrap 3, so use v3.3.7
If you resolve something, it means that you can access it in your controller, but it's not assigned to $scope. So inject users into your controller and assign its value.
```
.controller("Controller", function ($scope, $uibModal, users) {
   $scope.users = users;
   /* rest of code*/
}
```

You can see result of these changes in this plunker

answered Sep 28, 2018 at 13:09

barbsan

3,46811 gold badges23 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

not a Programmer Over a year ago

Thanks, it works now. But I have one more question: can I use Bootstrap v4 instead of v3?

not a Programmer Over a year ago

The problem was, as I understood correctly, in inconsistence between Bootstrap v4 and UI Bootstrap for AngularJS. Is there a way to overcome this?

barbsan Over a year ago

this may help you :stackoverflow.com/questions/42690497/…

Collectives™ on Stack Overflow

AngularJS ui.bootstrap modal dialog is not showing

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related