javascript - 如何使用 Angular-strap 的 onBeforeShow() 将 css 样式应用于 Popover

Question

请告诉我有关使用 Angular-strap Popover 库的 onBeforeShow() 事件应用 CSS(left) 样式的信息。

基本上，我想将弹出窗口的左侧位置减少 50-100 像素，以便将其显示在元素的中间(至少更靠近)，而不仅仅是 Angular 落。

您可以使用这个例子或使用它 - http://plnkr.co/edit/62BDv7JwluOl3eqtXPCZ?p=preview

感谢我们的帮助。

Answer 1

angular strap popover 在内部使用 tooltip 模块。如果您通过创建 popover 指令来使用 $popover 服务，那么您必须在工具提示上处理事件。所以你需要的是:

$scope.$on('tooltip.show.before', function(){
    alert('The popover onBeforeShow state');
    //$('.popover').css('left','100px')
});

但似乎在这个事件中，popover 元素尚未在 dom 上创建，因此无法从 Controller 更改其样式(如果您想通过更改其配置来更改样式，那么这是正确的事件)。但是 tooltip.show 事件可以满足您的需要(来自 Controller 功能)。在此事件中，您可以使用更改弹出框元素的 css 的功能。

Plunker 示例:https://plnkr.co/edit/eSzNE95yBjegzYSTdFRE?p=preview

(过渡可能不干净，但您可以使用稍微慢一点的动画来处理。)

附言您可以使用所有这些事件来处理弹出框:tooltip.show.before,tooltip.show,tooltip.hide.before,tooltip.hide，