add a class to the ui-view based on the current state

Question

In a AngularJS (1.2.7) project, using UI Router (0.2.8), I want to apply the current state as a class to the ui-view element, because that would allow me to apply animations for specific states, e.g. do transition A going from login to start and do transition B going from start to settings.

At the moment I have the $state object on the $rootScope (as mentioned here, which allows me to add a state-based class on the body using ng-class="$state.current.name". However, if I add that to the ui-view element, e.g.

<div ui-view ng-class="$state.current.name"></div>

Then the class is one step behind the actual state. So when going from "login" to "start", the class will be "login" instead of "start".

@williamsowen We ended up using brisky's solution. I'll mark it as accepted. — Ron, Mar 17 '15 at 16:59
@Ron - cheers, this all works great. But it doesn't seem to bind the class before `ng-enter`. So I can't animate the initial entrance of the view - no problem animating `ng-leave` etc. Have you managed this by any chance? — williamsowen, Mar 17 '15 at 23:06

score 6 · Accepted Answer · answered Mar 05 '14 at 11:57

6

I think this is a bug, you can read more about the issue here:

https://github.com/angular-ui/ui-router/issues/866

Until it is fixed I suggest such a workaround:

<div ng-class="$state.current.name"><div ui-view></div></div>

answered Mar 05 '14 at 11:57

brisky

197
1
1
14

score 1 · Answer 2 · answered May 26 '15 at 19:01

I'm reading between the lines of what I think you're trying to do: you want to style a particular view differently depending on the state/route. Here's what I'm doing currently:

1) Set a state attribute on the HTML element:

<html lang="en" ng-app="MyApp" ng-controller="MyAppCtrl" state="{{ state }}">
    <div ui-view="nav"></div>
    <div ui-view="page" autoscroll="true"></div>
</html>

2) Update the state name whenever the route changes:

app.controller('MyAppCtrl', function($rootScope){

  $rootScope.state = 'home';

  $rootScope.$on('$stateChangeSuccess', function(event, toState) {
    $rootScope.state = toState.name;
  });

});

3) Using attribute selectors in the stylesheets:

[state="app.articles"] [ui-view="page"] {
  section {
    font-size: 1.8rem;
  }
}

score 1 · Answer 3 · answered Mar 17 '16 at 22:12

Instead of adding $state to $rootScope I just put a method on the controller of my root directive that returns the active state name. Then I added to the DOM like so:

<ui-view active-state="{{ctrl.getActiveState()}}"></ui-view>

Then in my CSS I can use selectors like this:

[active-state="someStateName"] { ... }

If you prefer a class it would be just as easy to do this:

<ui-view class="{{ctrl.getActiveState()}}"></ui-view>

...but you would want to replace all "." characters with "-" in your getActiveState() method.

score 0 · Answer 4 · answered Mar 16 '15 at 07:15

0

but, i has question about that : <div ng-class="$state.current.name"><div ui-view></div></div>

$state.current.name equal user.login hou to code my css?

answered Mar 16 '15 at 07:15

Mason Meng

1
3

and how to replace the dot in the classname – Mason Meng Mar 16 '15 at 07:16
I got how to do it ` .controller('nameCtrl', ['$scope', '$state', function($scope, $state){$state.className = 'your class name'}])` – Mason Meng Mar 17 '15 at 02:31

add a class to the ui-view based on the current state

4 Answers4

Linked