如何关闭用户界面，引导模式，当按下返回键Android手机上？(How to close ui-bo

我有一个样本UI的自举模式（从UI的自举文件）

 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>

我打开一个模式后，当我按下返回键Android设备上，它只是返回上一页，我怎么能关闭模式，而不是返回上一页？

我花了很多时间，发现很多帖子是这样的（如何使用浏览器关闭模式引导后退按钮，而不是去背页？` ），但没有奏效。

任何解决方案？

提前致谢。

Answer 1:

对面此次来到自己，发现有效的解决方案在这里。它需要使用UI的路由器虽然。把这个在您运行阻滞：

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

Answer 2:

也许你会希望有一个事件处理程序抢后退按钮事件。这样一来，你有更多的控制。我采用了棱角分明的材料，但它应该是你的情况非常相似：

//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);