当项目从 ng-repeat 中移除时，AngularJS UI Bootstrap popover outsideclick 触发器关闭 popover-6ren

当项目从 ng-repeat 中移除时，AngularJS UI Bootstrap popover outsideclick 触发器关闭 popover

转载作者：行者123 更新时间：2023-12-01 04:34:41

我正在使用带有外部点击触发器和弹出框模板的 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-ifs 更改为 ng-show 并且在单击按钮时弹出框没有关闭。

您的解决方案可能是标记已删除的项目并隐藏它们，并在弹出窗口关闭时进行真正的“删除”!

像这样:http://plnkr.co/edit/2NifZtWtUuqh8CCBTALf?p=preview

关于当项目从 ng-repeat 中移除时，AngularJS UI Bootstrap popover outsideclick 触发器关闭 popover，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36148889/