Trying to dismiss a simple angular modal results in: Cannot read property 'dismiss' of undefined

Question

I'm trying to have a simple modal appear when a user clicks something that is still under construction on my demo app.

Everything works up to the point where I want the user to click the 'Close' button on the modal. When they do they get:

TypeError: Cannot read property 'dismiss' of undefined

This is what I have in my main controller:

    $scope.underConstruction = function () {
    var modalInstance = $modal.open({
        templateUrl: 'app/shared/underconstruction.html',
        controller: 'ModalInstanceCtrl',
        size: 'sm',
        resolve: {
            '$modalInstance': function () { return function () { return modalInstance; } }
        }
    });
    console.log('modal opened');
    modalInstance.result.then(function (response) {
        $scope.selected = response;
        console.log(response);
    }, function () {
        console.log('Modal dismissed at: ' + new Date());
    });
};

Then in my ModalInstanceCtrl I have:

app.controller('ModalInstanceCtrl', ['$scope', '$modal', function ($scope, $modal, $modalInstance) {
$scope.cancel = function () {
    $modalInstance.dismiss('cancel');
};
}]);

I'm using angular-ui version 0.12.0, angularjs version v1.3.11

The close() method is hit, then the above error is thrown.

I have looked around at various results and questions and seen references to bugs and other issues, but the use cases are more complex than mine - my modal just shows some text and a close button. For example, I found an answer that says:

$modalInstance is made available for injection in the controller by AngularUI Bootstrap implementation. So, we don't need any effort ro "resolve" or make it available somehow.

Stewie answered correctly. You should get rid of this notation, and use *ngmin* or *ngannotate* while you are minifying your scripts. — Ioan, Feb 05 '15 at 14:38

score 6 · Answer 1 · answered Feb 05 '15 at 14:18

I was able to simplify things:

$scope.underConstruction = function () {
    var modalInstance = $modal.open({
        templateUrl: 'app/shared/underconstruction.html'
    });
    console.log('modal opened');
};

Then in my modal template:

  <button class="btn btn-primary" ng-click="$dismiss('cancel')">Close this message</button>

As per the documentation:

In addition the scope associated with modal's content is augmented with 2 methods:

$close(result)

$dismiss(reason)

Those methods make it easy to close a modal window without a need to create a > dedicated controller.

I did try this earlier but I guess either something else was interfering or I didn't clear my cache.

score 3 · Accepted Answer · answered Feb 05 '15 at 14:29

3

You deliberately "defined" your $modalInstance argument as undefined by not declaring it as a dependency in your Inline Annotation Array where you're declaring the ModalInstanceCtrl controller.

It should have been:

['$scope', '$modal', '$modalInstance', function($scope, $modal, $modalInstance){ ... }]

The "we don't need any effort..." part does not mean you don't have to specify it as a dependency.

answered Feb 05 '15 at 14:29

Stewie

60,366
20
146
113

Ah, OK. Thanks. That's working more like I was expecting now. – Mike Rouse Feb 05 '15 at 14:44

score 1 · Answer 3 · edited Sep 11 '19 at 07:27

1

it works for me

if(typeof(alert/popover)!="undefined"){
    await alert/popover.dismiss();
  }

edited Sep 11 '19 at 07:27

Masoud Rahimi

5,785
15
39
67

answered Sep 11 '19 at 07:10

Maksudul Hasan Raju

865
9
6

Trying to dismiss a simple angular modal results in: Cannot read property 'dismiss' of undefined

3 Answers3