AngularJS Bootstrap 弹出框自定义触发器

Question

在我的 WebApp 中，我想显示一个自定义的弹出窗口，当我的控制器中的变量被设置时，它将被触发。为此，我创建了一个自定义触发事件并将其设置为 $tooltipProvider.setTriggers({"showChat": "hideChat"}]

我的代码 plnkr.co 无法正常工作。

我还在 Whosebug 上检查了其他似乎有效的解决方案（例如 or 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

AngularJS Bootstrap 弹出框自定义触发器

AngularJS Bootstrap Popover custom trigger

javascript

twitter-bootstrap

angularjs

bootstrap-popover

angular-bootstrap