我正在使用带有外部单击触发器和弹出框模板的AngularJS UI Bootstrap弹出框。这一切都按预期工作，除了在我的模板中，我有一个 ng-repeat，其中包含一个选项来删除重复中的一个项目。虽然这一切都有效，但一旦删除该项目，弹出窗口就会关闭 - 就好像它认为我已经在弹出框之外单击了。这里有一个要演示的扑通：http://plnkr.co/edit/vAk3y779eEmLSmIg9kb4?p=preview
.JS：
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function ($scope, $sce) {
$scope.dynamicPopover = {
templateUrl: 'myPopoverTemplate.html',
};
$scope.checklistitems = [
{check: false, text: "item 1"},
{check: false, text: "item 2"},
{check: false, text: "item 3"}
];
$scope.delete = function (item) {
var index;
index = $scope.checklistitems.indexOf(item);
$scope.checklistitems.splice(index, 1);
console.log("yo delete: " + item.text)
}
});
.html：
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.5.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="PopoverDemoCtrl">
<span>some text to pad</span>
<button uib-popover-template="dynamicPopover.templateUrl"
type="button" class="btn btn-default"
popover-placement="bottom"
popover-trigger="outsideClick"
>Popover With Template</button>
<script type="text/ng-template" id="myPopoverTemplate.html">
<div ng-repeat="item in checklistitems">
{{item.text}}
<button ng-click="delete(item)">delete</button>
</div>
</script>
</div>
</body>
</html>
我遇到了同样的问题，我只是发现当弹出窗口中的 HTML 发生变化时这是一个问题！
我将ng-if更改为ng-show，单击按钮时弹出窗口没有关闭。
您的解决方案可能是标记已删除的项目并隐藏它们，并在弹出窗口关闭时进行真正的"删除"！
像这样：http://plnkr.co/edit/2NifZtWtUuqh8CCBTALf?p=preview
Working Plnkr
删除popover-trigger="outsideClick"，它应该可以工作。