当从ng-repeat中删除项目时,AngularJS UI Bootstrap popover outsideclick触发器会关闭弹出窗口

机械师

我正在将AngularJS UI Bootstrap popover与外部单击触发器和popover模板一起使用。一切都按预期工作,除了我的模板内,我有一个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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Angular UI Bootstrap Popover-单击触发时防止默认

来自分类Dev

表中的角度UI弹出窗口(ng-repeat)。使用popover-is-open,如何阻止所有弹出窗口打开?

来自分类Dev

Angular UI Bootstrap Popover添加关闭按钮

来自分类Dev

Bootstrap Popover在AngularJs ng-repeat内部不起作用

来自分类Dev

AngularJS Bootstrap Popover自定义触发器

来自分类Dev

AngularJS - bootstrap popover,如何在 ng-repeat 中正确使用“popover-is-open”

来自分类Dev

当用户单击外部Popover时关闭Bootstrap Popover

来自分类Dev

ng-bootstrap popover不会关闭,而是会稍微重新定位

来自分类Dev

UI Bootstrap Popover:更改宽度

来自分类Dev

“扩展” Angular UI Bootstrap Popover

来自分类Dev

如何使ui-bootstrap popover在float中运行?

来自分类Dev

AngularJS Bootstrap Popover与关闭按钮激活问题

来自分类Dev

Angular UI Bootstrap Popover-如何关闭所有打开的Popover

来自分类Dev

UI Bootstrap Modal不会关闭。AngularJS

来自分类Dev

LI中的Bootstrap Popover

来自分类Dev

带有模板的Angular UI Bootstrap Popover

来自分类Dev

ng-repeat中的UI Bootstrap单选按钮

来自分类Dev

ng-repeat中的UI Bootstrap单选按钮

来自分类Dev

如何将bootstrap popover添加到Angular ng-repeat

来自分类Dev

手动触发时Bootstrap Popover放置的“左右”问题

来自分类Dev

AngularJS,UI Bootstrap DropDown Toggle,如果绑定了参数则ng-click不触发

来自分类Dev

AngularJS,UI Bootstrap DropDown Toggle,如果绑定了参数则ng-click不触发

来自分类Dev

鼠标移动时具有模板移动/跳转功能的UI Bootstrap Popover

来自分类Dev

ui-bootstrap popover-trigger表达式在版本2.0.0中中断

来自分类Dev

Meteor.js集合:新记录未在bootstrap ui popover中更新

来自分类Dev

UI Bootstrap Popover中隐藏表单内的图标导致其他图标被垂直向下推

来自分类Dev

悬停在图像选择器中的bootstrap popover

来自分类Dev

带有ng-repeat的ui.bootstrap.buttons

来自分类Dev

带有ng-repeat的ui.bootstrap.buttons

Related 相关文章

  1. 1

    Angular UI Bootstrap Popover-单击触发时防止默认

  2. 2

    表中的角度UI弹出窗口(ng-repeat)。使用popover-is-open,如何阻止所有弹出窗口打开?

  3. 3

    Angular UI Bootstrap Popover添加关闭按钮

  4. 4

    Bootstrap Popover在AngularJs ng-repeat内部不起作用

  5. 5

    AngularJS Bootstrap Popover自定义触发器

  6. 6

    AngularJS - bootstrap popover,如何在 ng-repeat 中正确使用“popover-is-open”

  7. 7

    当用户单击外部Popover时关闭Bootstrap Popover

  8. 8

    ng-bootstrap popover不会关闭,而是会稍微重新定位

  9. 9

    UI Bootstrap Popover:更改宽度

  10. 10

    “扩展” Angular UI Bootstrap Popover

  11. 11

    如何使ui-bootstrap popover在float中运行?

  12. 12

    AngularJS Bootstrap Popover与关闭按钮激活问题

  13. 13

    Angular UI Bootstrap Popover-如何关闭所有打开的Popover

  14. 14

    UI Bootstrap Modal不会关闭。AngularJS

  15. 15

    LI中的Bootstrap Popover

  16. 16

    带有模板的Angular UI Bootstrap Popover

  17. 17

    ng-repeat中的UI Bootstrap单选按钮

  18. 18

    ng-repeat中的UI Bootstrap单选按钮

  19. 19

    如何将bootstrap popover添加到Angular ng-repeat

  20. 20

    手动触发时Bootstrap Popover放置的“左右”问题

  21. 21

    AngularJS,UI Bootstrap DropDown Toggle,如果绑定了参数则ng-click不触发

  22. 22

    AngularJS,UI Bootstrap DropDown Toggle,如果绑定了参数则ng-click不触发

  23. 23

    鼠标移动时具有模板移动/跳转功能的UI Bootstrap Popover

  24. 24

    ui-bootstrap popover-trigger表达式在版本2.0.0中中断

  25. 25

    Meteor.js集合:新记录未在bootstrap ui popover中更新

  26. 26

    UI Bootstrap Popover中隐藏表单内的图标导致其他图标被垂直向下推

  27. 27

    悬停在图像选择器中的bootstrap popover

  28. 28

    带有ng-repeat的ui.bootstrap.buttons

  29. 29

    带有ng-repeat的ui.bootstrap.buttons

热门标签

归档