I am attempting to create a straightforward modal that appears when a user clicks on a section of my demo app that is still in progress.
Everything is functioning correctly until the point where I require the user to click the 'Close' button on the modal. Upon doing so, they encounter the following error:
TypeError: Cannot read property 'dismiss' of undefined
This is the code snippet from 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());
});
};
In my ModalInstanceCtrl, I have the following code:
app.controller('ModalInstanceCtrl', ['$scope', '$modal', function ($scope, $modal, $modalInstance) {
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}]);
I am utilizing angular-ui version 0.12.0 and angularjs version v1.3.11
Despite reaching the close() method, the aforementioned error is triggered.
While researching potential solutions, I came across references to bugs and other issues, although the scenarios were more elaborate than mine - my modal simply displays some text and a close button. For instance, I encountered an answer on Stack Overflow which stated:
$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.