Angular UI-router 父状态未激活答案

【问题标题】：Angular UI-router parent state not activeAngular UI-router 父状态未激活
【发布时间】：2016-04-10 11:23:02
【问题描述】：

您好，我遇到了一个问题，即调用孩子时父状态未激活。

我正在使用带有ui-sref-active 功能的ui-router。

这是我的路由器代码：

.state('customers', {
    abstract: true,
    parent: 'app',
    url: '/customers',
    templateUrl: 'app/customer/parent.html',
})
.state('customers.list', {
    parent: 'customers',
    url: '',
    controller: 'customerCtrl as customer',
    templateUrl: 'app/customer/index.html'
})

.state('customers.birthday', {
    parent: 'customers',
    url: '/birthday',
    templateUrl: 'app/customer/birthday.html',
})

这是我的html：

 <ul id="menu-sidebar">
    <li class="has_sub">
        <a ui-sref="customers.list" class="waves-effect" ui-sref-active="subdrop">
            <i class="fa fa-users"></i> <span> Customers</span>
        </a>
    </li>
</ul>

我使用 ng-repeat 是因为有很多菜单。

问题是当我调用/customers 时，ui-sref-active 工作正常。但是当/customers/birthday调用时，ui-sref-active就消失了。

下面是截图：

任何建议如何使它工作？

提前致谢！

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

可能是因为您的嵌套路线。试试这样的：

.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
$stateProvider
.state('exampleState', {
    url: '/example',
    abstract: true,
    templateUrl: 'templates/example/root-view.html',
    controller: 'ParentCtrl'
  })

  .state('exampleState.games', {
    url: '/games',
    views: {
      'stats-games':{
        templateUrl: 'templates/example/firstpage.html',
        controller: 'PageOneCtrl'
      }
    }
  })
  .state('exampleState.sesaons', {
    url: '/seasons',
    views: {
      'stats-games':{
      templateUrl: 'templates/example/secondpage.html',
      controller: 'PageTwoCtrl'
    }
  })
});

【讨论】：

【解决方案2】：

    .state('home', {
        url: '/home',
        abstract: true,
        templateUrl: 'templates/home.html'



    })
    .state('home.main', {
        url: '',
        templateUrl: 'templates/main.html'



    })
    .state('home.owner', {
        url: '/owner',
        templateUrl: 'templates/owner.html'

    })

【讨论】：

对不起，逗号真的会影响 ui-sref-active 吗？因为我通常在这样的对象后面加上逗号。我已经尝试删除它，它没有运气:)
请尝试这种方式，不需要添加perent属性
plnkr.co/edit/HnwcS1pxd4CbMSNS9EGD 也许对你有帮助。看不出您的代码有任何问题
@trollr 我和我的没有什么大的不同。据我所知并尝试过的是我的 ui-sref 指向 customers.list 。当我将其更改为仅customers 时，它可以工作，但它当然不能进入状态，因为它是抽象状态。有什么想法吗？
@trollr 我刚刚意识到你在家里的 plunkr 你写错了摘要。现在我修复它并更改 ui-sref。现在它就像我一样发生。这是修复 plunkr plnkr.co/edit/NJRx7RT0TRg04Wbw6kUO?p=preview

【解决方案3】：

我终于解决了。

在我的

    app.run(['$rootScope', '$state', function($rootScope, $state) {
    $rootScope.$on('$stateChangeStart', function(evt, to, params) {
      if (to.redirectToChild) {
        evt.preventDefault();
        $state.go(to.redirectToChild.state, params)
      }
    });
}]);

 app.config([ '$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("/404");
    .state('customers', {
        url: '/customers',
        templateUrl: 'app/customer/parent.html',
        redirectToChild: {
                state: 'customers.list'
            },
    })
    .state('customers.list', {
        parent: 'customers',
        url: '',
        controller: 'customerCtrl as customer',
        templateUrl: 'app/customer/index.html'
    })

    .state('customers.birthday', {
        parent: 'customers',
        url: '/birthday',
        templateUrl: 'app/customer/birthday.html',
    })
}]);

【讨论】：