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

问题

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".

回答1:

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>

回答2:

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;
  }
}

回答3:

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.

回答4:

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?

来源：https://stackoverflow.com/questions/21308563/add-a-class-to-the-ui-view-based-on-the-current-state

标签

angularjs

angular-ui-router