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

Question

请让我知道如何使用Angular-strap Popover lib的onBeforeShow()事件应用CSS(left)样式。

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

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

我很感谢我们的帮助。

Answer 1

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

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

但是在这个事件中，popover元素似乎还没有在dom上创建，所以不能从控制器改变它的样式(如果你想通过改变它的配置来改变样式，那么它是正确的事件)。但是tooltip.show事件做了你需要的事情(从控制器函数)。在此事件中，您可以拥有更改popover元素的css的功能。

柱塞示例：https://plnkr.co/edit/eSzNE95yBjegzYSTdFRE?p=preview

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

附注:您可以使用所有这些事件来处理popover：tooltip.show.before、tooltip.show、tooltip.hide.before、tooltip.hide、