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.

Answer 1

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.