ui-view incompatible with ng-class - ALL ng-class-based animations broken - 0.2.8 & 1.2.11

[arush]

I've been following #320 for a few months, and although it was closed, unfortunately my comment on ng-class based animations was skipped over. I was hoping this was resolved with 0.2.8 but it is not.

CSS classes managed by ng-class conflict with ALL ui-view animations. This means you CANNOT use ng-class on a ui-view

The implications are pretty huge:

• cannot change animations after bootstrap
• cannot disable animations
• cannot slide left/right depending on the app's context (see examples below)

Expected results (working with ng-view)

<div ng-view class="firstAnimationClass ng-leave" ng-class="this.variable">
<div ng-view class="firstAnimationClass ng-enter" ng-class="this.variable">
or
<div ng-view class="secondAnimationClass ng-leave" ng-class="this.variable">
<div ng-view class="secondAnimationClass ng-enter" ng-class="this.variable">

(firstAnimationClass/secondAnimationClass is assigned by ng-class="this.variable")

No matter how the dynamic class changes, both the entering and leaving view will have the same animation class

Actual results (using ui-view)

<div ui-view class="firstAnimationClass ng-leave" ng-class="this.variable">
<div ui-view class="secondAnimationClass ng-enter" ng-class="this.variable">

As soon as ng-class changes, the animation classes are out of sync and never get back in sync.

This situation should NEVER arise.

---

Code to reproduce

I have put together 2 plunkrs that are identical, except the first uses angular 1.2 ng-view, and the second uses ui-router/angular-1.2

working in ngRoute
http://plnkr.co/edit/MLsgJiYXJ4EQ7OnmUQWB?p=preview

broken in uiView
uiView: http://plnkr.co/edit/GYYKkBre9oZ4Yl2rcKdZ?p=preview

These should behave identically, it is the same code. But you will quickly see how animation classes get out of sync.

@nateabele you'll remember my previous examples when I initially raised this, and above I've updated all the libraries 1.2.11 and 0.2.8

FYI I also recommend we close #862 in favour of this, as I believe it is the same bug (but a vague explanation)

[gabrielmaldi]

+1 for fixing this.

Also, it seems that ui-view is not playing well with other Angular directives such as ng-show: #867

[kumarharsh]

I'd like to confirm this bug, even with my UI-Router version v0.2.7 and Angular version v1.2.4.
ng-show just breaks completely even with simple thing such as:

<div ui-view ng-show="false">

I am assuming the $watch is not even triggering

[gustavohenke]

I'm also facing the same problem and waiting for the fix.

[gabrielmaldi]

@kumarharsh could you comment that on #867?

[kumarharsh]

Funny, I had posted there earlier, but I believe this issue hits the core of it, and I presumed #867 would be closed in favour of this, given that there is only one maintainer of the project for now...

[nateabele]

@arush Thanks for staying on top of the issue. I'll try to find some time in the next day or two to port over the DOM-handling code from ngView, since there are a couple of related issues here.

[dremonkey]

This doesn't solve the problem, but does provide a fairly easy temporary work around. Just thought I'd provide it for anyone who also encounters this problem.

https://gist.github.com/dremonkey/9082268#file-ui-view-animate-js

[marcghorayeb]

I'd like to point out that a ui-view inside an ng-if block won't work anymore
prior to 0.2.8, you could insert a ui-view in an ng-if block and it would still be picked up by ui-router
now, it's as if the view does not exist, didn't have time to dig more though

[JohnBerg60]

Any progress on this issue?

[meenie]

This is fixed in #858 - It should be released soon.

[meenie]

http://plnkr.co/edit/JOP0QqRCc3dL1eMzSq13?p=preview updated plunker to show that it is fixed. I've referenced a version of ui-router that I built with my changes.

[meenie]

Closing. Please reopen if you believe it's not fixed :).

[geoah]

This has been giving me a headache for the past day or so.
I was having issues with this exact problem but this seemed to work.
The only difference with what I was doing is that I was using $state.go() instead of $location.url().

This is a modified version of the previous plunker.
http://plnkr.co/edit/ZEv8Nap7pWeMhMnAXkrc?p=preview

Am I doing something wrong or is this a side effect of the previous issue?

[seinavco]

+1

I have the same issue with $state.go() too!

[markalanevans]

I'm on Angular 1.3.5 & ui-router 0.2.13
And the ngClass on a uiView still does not work.

[hayesmaker]

+1 same issue Angular 1.3.2 & ui-router 0.2.13

I'm trying to update ng-class="isSelected" in ng-repeat inside a ui-view
it works once, but won't bind updates at runtime.

[hayesmaker]

Weirdly ng-class works ok if i don't navigate directly to the route via a url.

Here are my states:

$urlRouterProvider.otherwise("/console");
  //
  // Now set up the states
  $stateProvider
    .state('console', {
      url: "/console",
      templateUrl: "partials/console.html",
      controller: 'UserInputController'
    })
    .state('list', {
      url: "^/list",
      templateUrl: "partials/list.html",
      controller: 'ArtcilesListController'
    })

If I navigate to app via: http://localhost:3000/#/console

or via http://localhost:3000/#/list

ng-class inside list won't bind

If I goto http://localhost:3000 then the router sends me to http://localhost:3000/#/console, then in my controller I call $state.go('list');
And ng-class binds fine.

Very weird behaviour.

[astanb]

+1, this has been wrecking my head too!

Using angular 1.3.8 and ui-router 0.2.13.

[dimas-cyriaco]

Same as @alexstanbury

[owenzoocha]

+1

[yvesvanbroekhoven]

+1

[ctretyak]

+1

[ghost]

+1

[kingIZZZY]

+1

[jabyrd3]

Still not working. Any updates?

[BioPhoton]

+1

[lukadelux]

+1
Using angular 1.4.4 and ui-router 0.2.13.

[raffaelcavaliere]

We found a solution for this problem, pretty simple after all:
Instead of putting the dynamic class directly onto the ui-view, just put it onto its parent and change the css accordingly. For example :

Instead of :

<body>
<div ui-view ng-class="myAnimation"></div>
</body>

put:

<body ng-class="myAnimation">
<div ui-view></div>
</body>

and in the CSS just target the direct childs instead of element :

.slideleft > .ng-leave { /* transition */ }`
.slideleft > .ng-leave-active { */ transition */ }

etc.

[eddiemonge]

That doesn't fix the underlying problem though

[raffaelcavaliere]

BTW, I have the same problem with safari on mac and ios, using ng-view and ng-animate.
I think it goes beyond ui-router, it has to do with the way ng-animate handles the timing of ng-enter and ng-enter-active inside the digest cycle.

[ryskiz]

I'm having a problem styling the html element background image. I only want the html background image to show up on a specific state, but once I tamper with the html style it is used across all of the states... Anyone have a solution or is this impossible???

[vvsreddy496]

can any one please tell me the solution for above problem without changing the ui router

[vvsreddy496]

+1

[stale]

This issue has been automatically marked as stale because it has not had
recent activity. It will be closed if no further activity occurs.

This does not mean that the issue is invalid. Valid issues
may be reopened.

Thank you for your contributions.