How to prevent AngularJs from getting an old look and a new view of dom when changing a route

Question

I use the "slideable" directive, which creates a slide area and has a switch. This code, which was not written by me, but demonstrates a big problem for me. When I change views (most often / user /: id type), slideable is the directive used in the template. The directive searches for an element during its link function and links a click event. The problem is that when I change the routes and load a new view (the same type, but a different id), the directive is re-attached to the old view. If I stop the browser in chrome during the link, I will see two ng views on the dom, and the problem is that it is leaving.

I also have other problems that seem to be related to this phenomenon. Is it normal that the old look will still be on dom, while the new look is formulated? Why would not the old view be destroyed before the new one is rendered? How can I get around this problem in such a directive?

Thanks.

I want to understand conceptually what is happening. I have already changed the directive to select the last view and accordingly search and bind to the correct element. But I am a little puzzled by why there must be a state in which both coexist in the house.

Answer 1

One final reason that the old HTML snippet is briefly present with the new one is to support animating transitions from the old to the new. Take a look at the ngView documentation and you will see an example of an animated transition, and it will be clear that this is not a design error or defect.

Usually, when someone has problems with binding to the correct element or element, this is because they select the element without restricting the scope of the selector to the added or updated HTML fragment, or try to direct parts of the DOM outside the directive. So the first place to check that the directive is doing everything right, but, as I said, we will need code to check this.