Controlling a directive in a parent state with Angular UI-Router
A while ago, I ran into the following problem: I had a page with a sidebar that could be toggled on and off, with a sliding transition. At some point, it was needed to add a sibling state to the page that didn’t need the sidebar. However, when I switched states, the sidebar would stay on the screen for the duration of the slide transition. No matter what I tried, I couldn’t get Angular to ignore the transition and it became quite frustrating.
However, after using the power of Stack Overflow, I came across some hints that pointed me in the right direction. I managed to solve my problem by moving the enabled/disabled flag up to the parent state’s resolve block and then injecting the resolved object into the resolve block for each state. Okay, that sounds way more complicated than it actually is. Just take a look at this fiddle:
If you click on “State B” and then back to “State A”, you’ll notice that the block to the left appears and disappears without waiting for the duration of the open/close transition.