Question

所以这就是事情。我在项目的标题项上有这个ng-class：

ng-class="{ active: $state.includes('project')}"

我对项目的主要观点称为home，项目本身实际上处于抽象项目状态。

主页：

.state('home', {
  url: '/',
  templateUrl: '/views/project-list-view.html',
  controller: 'ProjectListCtrl'
})

项目：

.state('project', {
  template: '<ui-view/>',
  url: '/project',
  abstract: true,
  controller: function ($scope) {
    //
  }
})
.state('project.view', {
  url: '/:slug',
  params: {
    id: null,
    slug: null
  },
  templateUrl: '/views/project-view.html',
  controller: 'ProjectViewCtrl'
})

所以问题是当我从我的家庭状态（项目列表）导航到项目视图页面时，菜单项失去了它的活动类。当我在导航后刷新页面时，它可以正常工作。为什么这不能正常工作？我该如何克服这个问题？

编辑：标题中有ui-sref-active，但这不是破坏的相关部分。

Edit2：http://plnkr.co/edit/kwLBOFgBz0dYaKnavSum?p=preview

Answer 1

在您的支票中，您使用$state.includes（API reference with example）检查状态是否包含上一个状态。这是真的project.view包括project作为父状态。

您应该使用$state.is()代替此类检查。

Answer 2

按照自己的方式行事，您可以为您的应用创建Run Block，每次更改路线时，请查看其是否包含the project state：

app.run(['$rootScope', '$state', function($rootScope, $state) {

  $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState) {

    $rootScope.projectState = $state.includes('project') || $state.includes('home');

  });

}]);

然后，在index file：

中

<!-- remove ui-sref-active -->
<li ui-sref="home" ng-class="projectState ? 'active' : '' ">Link to somewhere</li>

这是您修改后的plunker

活动类打破状态变化

2 个答案: