Close button doesn't work in Angular UI Modal

Question

In this PLUNK I have an Angular UI Modal and a button to close it. The button doesn't work because the Modal instance doesn't have a close method.

If you remove the rendered statement, the button works. Why doesn't it work WITH rendered?

This DOESN'T work:

var app = angular.module('app', ['ui.bootstrap']);

app.controller('myCtl', function($scope,$uibModal) {

        $scope.openModal = function() {
          $scope.modalInstance = $uibModal.open({
              templateUrl: 'myModalContent.html',
              scope: $scope
            }).rendered.then(function() {
                 alert("modal rendered")
            }); 
        };

        $scope.close = function () {
            $scope.modalInstance.close();
        };

})

This DOES work (see PLUNK):

var app = angular.module('app', ['ui.bootstrap']);

app.controller('myCtl', function($scope,$uibModal) {

        $scope.openModal = function() {
          $scope.modalInstance = $uibModal.open({
              templateUrl: 'myModalContent.html',
              scope: $scope
            }); 
        };

        $scope.close = function () {
            $scope.modalInstance.close();
        };

})

DocMax · Accepted Answer · 2017-10-17 23:30:15Z

1

In the first case, you are assigning the rendered promise to $scopemodalInstance, not the instance. It works if you do something like (Plunk):

$scope.modalInstance = $uibModal.open({
    templateUrl: 'myModalContent.html',
    scope: $scope
});
$scope.modalInstance.rendered.then(function() {
    alert("modal rendered")
});

answered Oct 17, 2017 at 23:30

DocMax

12.2k7 gold badges48 silver badges45 bronze badges

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

Collectives™ on Stack Overflow

Close button doesn't work in Angular UI Modal

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related