LOTUSMS LOTUSMS - 16 days ago 5
AngularJS Question

Angular.ui Modal doesn't close or cancel

I can't find the way to title this question so if you can suggest a better way, please let me know. Anyway, on to my problem(s).

I am implementing a modal when a user wants to log out. User clicks on the logout icon. The icon invokes the modal with a logout function in my controller like this:

<li ng-controller="modalController">
<a href="" class="mb-control" ng-click="logout();" ><span class="fa fa-sign-out"></span></a>
</li>


My modalController looks like this

app.controller('modalController', ['$scope', '$location', '$uibModal', '$log', function($scope, $location, $uibModal, $log, $uibModalInstance) {
$scope.logout = function(){
$uibModal.open({
templateUrl: 'views/partials/logoutMsg.html'
});

$scope.ok = function () {
$uibModalInstance.close();
$location.path('/login');
};

$scope.cancel = function () {
$uibModalInstance.dismiss();
};
};
}]);


And my modal template has this in it:

<div class="mb-container">
<div class="mb-middle">
<div class="mb-title"><span class="fa fa-sign-out"></span> Log <strong>Out</strong> ?</div>
<div class="mb-content">
<p>Are you sure you want to log out?</p>
<p>Press No if you want to continue work. Press Yes to logout current user.</p>
</div>
<div class="mb-footer">
<div class="pull-right">
<button class="btn btn-primary mb-control-close" ng-click="cancel()">No</button>
<button ng-click="ok()" class="btn btn-success">Yes</a>
</div>
</div>
</div>
</div>


p.s. My reference calls to Angular bootstrap and my controller in my index.html checks out. And I am including ui.bootstrap in my angular.module as well. Actually, there is no errors in my console indicating any missing dependencies or bad injections.

THE PROBLEM


  1. The modal does open, but it doesn't close when I click the buttons or outside the modal area. Not only I want it to go away, but the
    Yes
    button should re-direct to the /login page and the modal dismisses. The
    No
    button just dismisses the modal. Clicking outside the modal area dismisses the modal as well.

  2. The modal is opening over and over and over for as many times as I click the logout icon. It's great that it opens it, but once is sufficient thank you lol


Answer

There are few things in your code that don't work.

Let's start with the most important thing : why the modal is not closing ?.

Your ok and cancel methods are assigned to a modalController scope, but you are not passing any scope to your modal, so it's using $rootScope and it doesn't have ok and close methods. To fix this you have to pass a scope to $uibModal.open method, so it should look like this :

$uibModal.open({
    templateUrl: 'views/partials/logoutMsg.html',
    scope: $scope //using modalController scope
 });

But this doesn't solve the problem. In ok and cancel your are referring to $uibModalInstance but it's undefined. You might think that just injecting it to a controller will solve the problem, but it won't. It's not available to inject - it would be if you'd inject it to a controller in the modal, so to fix this you need to assign the result of $uibModal.open to a variable.

var $uibModalInstance = $uibModal.open();

Here is working solution

https://jsfiddle.net/zho5k7af/

However I'd add a controller to a modal, so you are not polluting $scope. See my solution.

https://jsfiddle.net/3dhubhrm/1/