Я считаю, что это то, что jQuery делает внутри, чтобы отслеживать все элементы в DOM, которые вы используете для jQuery-событий. Возможно, вы не сможете удалить их, не отпуская события.
Это, по-видимому, связано с ошибкой. AngularUI еще не поддерживает Angular 1.4. Как только http://github.com/angular-ui/bootstrap/issues/3620 будет разрешено, это сработает.
Я использую Угловую версию 1.3.13 и имею аналогичную проблему. Я исследовал проблему и считаю, что эта ошибка простирается от угловой версии 1.3.13 до 1.4.1 здесь https://github.com/angular-ui/bootstrap/pull/3400
И если вы перейдете к нижней части этой ссылки, вы увидите сообщение от fernandojunior, в котором показаны версии, которые он тестировал и обновил, до тех пор, пока они не показывали ту же проблему. Он даже создал plnker для моделирования проблемы http://plnkr.co/edit/xQOL58HDXTuvSDsHRbra , и я смоделировал проблему в фрагменте кода ниже, используя пример кода углового интерфейса.
// angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular
.module('ui.bootstrap.demo', [
'ngAnimate',
'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>
<!-- angular 1.4.1 -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.js"></script>
<!-- angular animate 1.4.1 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-animate.min.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>
Я также использую Angular 1.3.0, и я также использую UI bootstrap-tpls-0.11.2, и по какой-то причине моя проблема произошла, когда я перенаправлялся на новую страницу, и фон все еще показывался, поэтому я закончил добавив этот код ...
.then(function () {
$("#delete").on('hidden.bs.modal', function () {
$scope.$apply();
})
});
, который я на самом деле нашел здесь .... Скрыть Bootstrap 3 Modal & amp; AngularJS redirect ($ location.path)
<button type="button" class="close" onclick="$('.modal-backdrop').remove();"
data-dismiss="modal">
$(document).keypress(function(e) {
if (e.keyCode == 27) {
$('.modal-backdrop').remove();
}
});
Пока команда не будет отсортирована здесь, это будет работать.
<div class="modal-footer">
<button class="btn btn-primary"
ng-click="registerModal.ok()"
remove-modal>OK</button>
<button class="btn btn-warning"
ng-click="registerModal.cancel()"
remove-modal>Cancel</button>
</div>
/*global angular */
(function () {
'use strict';
angular.module('CorvetteClub.removemodal.directive', [])
.directive('removeModal', ['$document', function ($document) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.bind('click', function () {
$document[0].body.classList.remove('modal-open');
angular.element($document[0].getElementsByClassName('modal-backdrop')).remove();
angular.element($document[0].getElementsByClassName('modal')).remove();
});
}
};
}]);
}());
К сожалению, похоже, что команда не находится на одной странице по этой проблеме, так как она была перенесена в отдельный поток вкладчиком, а затем поток, который он нажал, был закрыт другим, поскольку он считалось «вне темы» другим.
Просто вы можете сделать это, сначала закройте модальный u, который открыл
$('#nameOfModal').modal('hide');
в основном идентификатор модального. Второй, чтобы удалить, если какой-либо
$('body').removeClass('modal-open');
, наконец, закрыть фон
$('.modal-backdrop').remove();