How To Close An Angular-ui-bootstrap Uibmodal On Mouseleave Using Factory?

I've recently switched all our modals directives in our app over to Angular-ui-Bootstrap modals. Much better, however running into a new style of modal which closes on mouseleave i

Solution 1:

In your case, Your are using Factory for dynamic Modal. so you can use $uibModalStack in the below two ways.

1. $uibModalStack.dismissAll(); // dismiss all opened modal
2. $uibModalStack.dismiss(openedModal.key); // dismiss modal by key

Example of dismiss Method.

var top = $uibModalStack.getTop();
if (top) {
    $uibModalStack.dismiss(top.key);
}

It's very important to do dismissing the modal during router changes since its dynamic modal.

In general, $uibModal will help to open the modal then each modal is $uibModalInstance, if you want to close modal inside the modal.

Opening Modal on Event

angular.module('myPage')
  .controller('PageController', ['$uibModal',
    function($uibModal) {
      function onModalLink() {
        $uibModal.open({
          templateUrl: 'app/modals/paymentTpl.html',
          controller: 'PaymentModalController as vm',
          windowClass: 'generalModal myModal'
        });
      }
    }
  ]);

To Close from Instance.

angular.module('paymentModal')
  .controller('PaymentModalController', [
    '$uibModalInstance',
    function ChangeRepaymentController($uibModalInstance) {
      function onCancel() {
        $uibModalInstance.close(repaymentPercentage);
      }
    }
  ]);

modalInstance - The modal instance. This is the same $uibModalInstance injectable found when using controller.

WIKI Reference: https://github.com/angular-ui/bootstrap/tree/master/src/modal/docs

Solution 2:

This is wrong approach - you can not "just close modal", cause you dont tell which modal to close. I recommend you to redesign this...

You can have a look at $uibModalStack - it stores opened modals and have methods like dismisAll

Solution 3:

I use close() method with $uibModal and open() method for manage in AngularJS $uiModal

Open method

vm.lanzarPopShowTask = lanzarPopShowTask;
function lanzarPopShowTask(index){
    vm.modalInstance = $uibModal.open({
        animation: true,
        ariaLabelledBy: 'modal-title-top',
        ariaDescribedBy: 'modal-body-top',
        templateUrl: '/btask/index/task.html',
        size: 'm',
        controller: function ($scope) {
            vm.task = vm.tasks[index];
            vm.index = index;
        },
        scope: $scope
    });
}

And Close method

vm.modalInstance.close();

Solution 4:

When doing this I set the modal as a scope variable then use $scope.sweetModal.close() or $scope.sweetModal.dismiss() you just have to remember that if you were to do the following it wouldn't work:

$scope.openModal = function () {
    $scope.sweetModal = $uibModal.open({
        templateUrl: '/modals/sweetModal.html',
        size: 'md',
        scope: $scope,
        backdrop: true
    })
        .result.then($scope.modalCloseFunction, $scope.modalDismissFunction);
};

Where as the following would work because of how the variable is set:

$scope.openModal = function () {
    $scope.sweetModal = $uibModal.open({
        templateUrl: '/modals/sweetModal.html',
        size: 'md',
        scope: $scope,
        backdrop: true
    });

    $scope.sweetModal.result.then($scope.modalCloseFunction, $scope.modalDismissFunction);
};