Question

在AngularJS（1.2.7）项目中，使用UI路由器（0.2.8），我想将当前状态作为类应用于ui-view元素，因为这样我就可以为特定状态应用动画，例如转换A从登录到开始，转换B从开始到设置。

目前我在$ rootScope上有$ state对象（如mentioned here，这允许我使用ng-class =“$ state.current.name”在主体上添加一个基于状态的类但是，如果我将其添加到ui-view元素，例如

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

然后课程落后于实际状态一步。因此，当从“登录”转到“开始”时，该类将是“登录”而不是“开始”。

Answer 1

我认为这是一个错误，您可以在此处详细了解该问题：

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

在修复之前，我建议采用这样的解决方法：

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

Answer 2

我正在阅读我认为你想要做的事情：你想根据州/路线不同地设置特定视图的样式。这就是我目前正在做的事情：

1）在HTML元素上设置一个state属性：

<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）每当路线改变时更新州名：

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

  $rootScope.state = 'home';

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

});

3）在样式表中使用属性选择器：

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

Answer 3

我没有将$ state添加到$ rootScope，而只是在我的root指令的控制器上放置一个方法，该方法返回活动状态名称。然后我像这样添加到DOM：

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

然后在我的CSS中我可以使用这样的选择器：

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

如果您喜欢上课，那么这样做很容易：

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

...但你想要替换所有“。”在getActiveState（）方法中带有“ - ”的字符。

Answer 4

但是，我对此有疑问：<div ng-class="$state.current.name"><div ui-view></div></div>

$state.current.name等于user.login来代码我的css？

根据当前状态向ui-view添加一个类

4 个答案: