Angular UI Bootstrap Popover - Prevent default when triggering with click

Question

I have a table with a number of rows, each can be selected, on the first column is an info button using bootstraps popover (UI Bootstrap Angular).

<span class='glyphicon glyphicon-info-sign' popover-placement='right' popover='my notes to display'></span>

When I click on the item I want it not to select the item behind it.

I know this can be accomplished using e.preventDefault and e.stopPropagation(), how do I implement this with bootsrap UI?

Thanks

How would that work with UI Bootstrap, ui bootstrap seems to just work with attributes? — Mantisimo
– Mantisimo, Commented Feb 18, 2014 at 14:57
I said you can use it in angular views. So in your case I think you used angular so you can use it like ng-click="$event.preventDefault()". If not then tell your problem in detail. — Jay Shukla
– Jay Shukla, Commented Feb 18, 2014 at 15:00
almost right. but instead of preventDefault one should use here stopPropagation to avoid the event bubbling up. — stride
– stride, Commented Feb 18, 2014 at 15:17

stride · Accepted Answer · 2014-02-18 15:00:54Z

7

Tell it to stop propagating events like so:

 <span ng-click="$event.stopPropagation()" class='glyphicon glyphicon-info-sign' popover-placement='right' popover='my notes to display'></span>

That should help.

answered Feb 18, 2014 at 15:00

stride

1,9511 gold badge17 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

stride Over a year ago

plnkr.co/edit/2ot0FLCUQwj1gogBLON9?p=preview clicking the i glyph triggers only its own event and not its parent event from the button.

Mantisimo Over a year ago

thanks, that did the trick... because I'm rendering the code from inside a controller. some hacky stuff I didn't want to use compile with you example so i've done the following onclick='(function(e) { e.stopPropagation(); })'

Dale K Over a year ago

I had to use $event.preventDefault(); for this to work in Angular6 in Chrome.

Collectives™ on Stack Overflow

Angular UI Bootstrap Popover - Prevent default when triggering with click

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related