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

Question

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

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

感谢我们的帮助。

Answer 1

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

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

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

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

P.S。您可以使用所有这些事件来处理弹出窗口： tooltip.show.before, tooltip.show, tooltip.hide.before, tooltip.hide、

How to apply css styles to Popover using onBeforeShow() of Angular-strap