Question

我做了一个简单的演示，我只是动态添加行。当我按下添加按钮并在输入字段中填写名称然后按确定它会生成一行。所以有一个 Star 图标，我需要在点击时弹出。我能够显示流行音乐。现在我需要在用户点击外面时隐藏该弹出窗口。我用谷歌搜索它，找到一个解决方案也可以正常工作，但它不像有角度你能告诉我怎么能用角度方式隐藏..或者另一种方式..？

第二个问题是：当我生成第二行并点击星形图标时，它没有隐藏以前的开放式弹出窗口 - 为什么？

http://plnkr.co/edit/46RWSLtxxJgvw5MF1PmM?p=preview

我可以在这样点击外面时隐藏弹出窗口但是这个jQuery方式你有其他方式吗？

$('html').on('click', function(e) {
  if (typeof $(e.target).data('original-title') == 'undefined' &&
     !$(e.target).parents().is('.popover.in')) {
    $('[data-original-title]').popover('hide');
  }
});

Answer 1

我不确定为什么你没有使用提供Bootstrap popover的AngularJS库之一，比如我所贡献的this one，但一般的“角度”解决方案是跟踪状态指令中的popover，并在必要时对点击作出反应。 E.g：

// in the link method
isOpen = false

function openPopover () {
  // ... open the popover ...
  // track the state
  isOpen = true;
}

function closePopover () {
  // ... close the popover ...
  // track the state
  isOpen = false;
}

function handleClick ( event ) {
  if ( isOpen ) {
    event.preventDefault();
    event.stopPropagation();
    closePopover();
  }
};

$rootElement.on( 'click', handleClick );

scope.on( 'destroy', function () {
  $rootElement.off( 'click', handleClick );
});

如何在角度点击外面时隐藏弹出窗口？

1 个答案: