Intive Blog

Angular UI Router + ngAnimate bug

Bugs are commonplace in our job but, on this occasion, I bumped into a nasty one on an application. What happened was that, when surfing different screens, the header displaying the section name disappeared. The bug can still be seen here.

We then have a state main defining the layout of the application: header, footer and the content in between. When browsing, only the content scrolls, while the header and footer stay in the same place.

But the header is dynamic. To set it, each section writes a variable in the scope of main and is accountable for leaving it as it was when users browse towards another view.

If it was not for animated transitions among views, when browsing, the outgoing scope is destroyed and the scope of the incoming view is created. It is a synchronous process that happens in the following order.

  • The scope of the incoming view is created before the animation of the outgoing view finishes.
  • The scope of the outgoing view is destroyed when its animation finishes.

This necessity exists because, should there be transactions, both views would coexist. If the scope was destroyed while one exits, a template without compilation would be seen. We can find a long discussion about this here.

In particular, how was my app being affected? The incoming view defined its header and the outgoing reset it, erasing what the previous view had defined.

In this particular case, ngAnimate was added out of necessity from other modules, not because browsing was animated. uiRouter keeps its behavior, unless you specify every non-animated uiView with the attribute noanimation.

Writing this on each uiView of the app is not a simple task. In the discussion referred to some lines before, a dev offered a more simple solution.

With this directive, the attribute noanimation is added to all the existing uiView and all our problems are overcome.

I would also like to point something out that might come in handy: While doing research, I found out that Angular allows you to have more than one directive with the same name, without them being overwritten.

The final version, which consists only in the addition of that module, can be found here. Happy coding! ☺

Sebastián Bogado

He was a full stack developer at intive – FDV. He worked with the Javascript stack on many platforms (Smart TVs & Smartwatches, NodeJS, hybrid mobile apps, and -of course- the browser).

Add comment