Angular UI Bootstrap - Cannot delete popover when triggering element is removed from DOM

Question

I am using a javascript library that will add/remove elements to the DOM when some data is updated.
To add a new element to the DOM it calls a template function returning an element. In my case, the template function is defined inside an angular directive and returns something like return $compile(html)(scope)[0]; because I need to use the UI Bootstrap Popover directive inside the added element.
For the Popover, I need to use popover-append-to-body="true".

My problem is, if the triggering element is removed from the DOM, the popover is never removed. So if we add a new triggering element, a second popover will be appended to body, etc.

Here is a simplified example : http://plnkr.co/edit/AFsXBcaLBAs0F2garbAu?p=preview
Clicking on the "Click" button opens the popover, clicking "Remove" removes the "Click" button, clicking "Add" re-adds the "Click" button and clicking "Click" again adds a second popover to the DOM.

How can I remove the Popover directive when the triggering element is removed from the DOM ?
I need to totally deletes it, not only hide it/remove it from the DOM (I can hide it with popover-is-open but when this is set back to true, I see the popover still exists).
Is there a way to call destroy on the Popover directive of the element that will be deleted ?

don't do DOM manipulation in the controller, you may want to redesign your code — svarog
– svarog, Commented Sep 7, 2016 at 18:19
@svarog This was just a quick example to show the popover problem. In my actual code I am not doing DOM manipulation in the controller but I am using a (not angular) library (that I call from inside an angular directive by the way). The problem is the "buttons" are created and added to the DOM by this library so I cannot keep their state in an array. What I wrote as vanilla js in my example is what I cannot control with angular in my real application. — Skiing-Marmot
– Skiing-Marmot, Commented Sep 7, 2016 at 20:03
then you have an entirely different problem. you'll need to import that button generating code to a link function inside a directive and keep a $watch on it, and $apply for changes — svarog
– svarog, Commented Sep 8, 2016 at 9:02

svarog · Accepted Answer · 2016-09-07 18:46:40Z

0

You shouldn't do DOM manipulation in you a controller, both in JS and HTML, that's why directives are for, and for your case there were a couple of built in directives you could have used.

you should have kept an array to represent your buttons and popover states
you should place all you JS code in your controller, and used ng-click to bind click events to functions in your controller
don't use onclick when you have ng-click
The angular API works completely different then vanilla JS and even jquery, so don't mix them, use what Angular provides you, refer to the docs for help.

Here is your "revamped" code

answered Sep 7, 2016 at 18:46

svarog

9,8855 gold badges66 silver badges79 bronze badges

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

Collectives™ on Stack Overflow

Angular UI Bootstrap - Cannot delete popover when triggering element is removed from DOM

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related