How to close ui-bootstrap modal when press back button on android phone?

Question

I have a sample ui-bootstrap modal (from ui-bootstrap document)

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {

  $scope.items = ['item1', 'item2', 'item3'];

  $scope.animationsEnabled = true;

  $scope.open = function (size) {

    var modalInstance = $modal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };

  $scope.toggleAnimation = function () {
    $scope.animationsEnabled = !$scope.animationsEnabled;
  };

});

// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {

  $scope.items = items;
  $scope.selected = {
    item: $scope.items[0]
  };

  $scope.ok = function () {
    $modalInstance.close($scope.selected.item);
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
});

<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="ModalDemoCtrl">
    <script type="text/ng-template" id="myModalContent.html">
    
        <div class="modal-header">
            <h3 class="modal-title">I'm a modal!</h3>
        </div>
        <div class="modal-body">
            <ul>
                <li ng-repeat="item in items">
                    <a ng-click="selected.item = item">{{ item }}</a>
                </li>
            </ul>
            Selected: <b>{{ selected.item }}</b>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="ok()">OK</button>
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
    </script>

    <button class="btn btn-default" ng-click="open()">Open me!</button>
    <button class="btn btn-default" ng-click="open('lg')">Large modal</button>
    <button class="btn btn-default" ng-click="open('sm')">Small modal</button>
    <button class="btn btn-default" ng-click="toggleAnimation()">Toggle Animation ({{ animationsEnabled }})</button>
    <div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
  </body>
</html>

After I open one modal, when I press back button on android device, it just go to previous page, how can I close the modal instead of go to previous page?

I spent many hours and found many posts like this (how to close a bootstrap modal with the browser back button instead of going back a page?`), but it didn't work.

Any solutions?

Thanks in advance.

score 13 · Accepted Answer · answered Oct 31 '15 at 18:17

13

Just came across this myself, and found a solution that works here. It requires the use of ui-router though. Put this in your run block:

.run([
    '$rootScope', '$modalStack',
    function ($rootScope, $modalStack) {
        $rootScope.$on('$locationChangeStart', function (event) {
            var top = $modalStack.getTop();
            if (top) {
                $modalStack.dismiss(top.key);
                event.preventDefault();
            }
        });
    }
])

answered Oct 31 '15 at 18:17

Filipe Silva

903
1
11
12

give me the error Unknown provider: $modalStackProvider <- $modalStack – Manoj Sanjeewa Jan 18 '17 at 09:36
1

Try $uibModalStack instead (was probably renamed since). – Sam Jan 25 '17 at 14:14

sean.boyer · Answer 2 · 2016-12-06T19:51:44.577

Probably you'll want to have an event handler grab the back button event. This way, you have more control. I'm using Angular Material, but it should be pretty similar in your case:

//Use the back button to navigate back
var backButton = function (ev) {
    var dialogOpen = angular.element(document).find('md-dialog').length > 0;        
    if (dialogOpen) {
        $mdDialog.cancel();
        return false;
    }
};
document.addEventListener("backbutton", backButton, false);

How to close ui-bootstrap modal when press back button on android phone?

2 Answers2

Linked