javascript - AngularJS Bootstrap Popover 自定义触发器

Question

在我的 Web 应用程序中，我想显示一个自定义的弹出窗口，当设置 Controller 中的变量时将触发该弹出窗口。为了实现此目的，我创建了一个自定义触发事件，并使用 $tooltipProvider.setTriggers({"showChat": "hideChat"}]

设置它

这是一个plnkr.co我的代码无法正常工作。

我还在 StackOverflow 上检查了其他解决方案(例如 AngularJS Bootstrap Tooltip - trigger on event 或 Good way to dynamically open / close a popover (or tooltip) using angular, based on expression? )，这些解决方案似乎有效，但我无法弄清楚我的代码错在哪里。我认为这只是一件小事(就像往常一样......:-))

Answer 1

Angular-bootstrap似乎使用addEventListener来订阅这个事件，这意味着你不能用.trigger()触发它，你需要的是dispatchEvent:

if(scope.showPopover) {
  console.log('trigger showChat')
  element.get(0).dispatchEvent(new Event("showChat"));
} else {
  console.log('trigger hideChat')
  element.get(0).dispatchEvent(new Event("hideChat"));
}

参见此固定plunker .

顺便说一句:除非您在应用程序中执行更复杂的操作，否则您只需使用 popover-is-open="showPopover" 即可触发弹出窗口，如 this plunker 中所示。