如何将ui-sref添加到多个状态名称？

Question

我需要向一个按钮添加两个州名称。这是两个州的名称。'home.contact‘和'home.contactList’。有没有办法做到这一点？

<md-grid-tile md-rowspan="1" md-colspan="1" ui-sref="home.contact" class="md-clickable" md-ink-ripple ui-sref-active="active">
    <div layout="column" layout-align="center center" layout-fill>
      <ng-md-icon icon="group" class="fill-color-white no-margin"></ng-md-icon>
      <span class="font-size-10">People</span>
    </div>
  </md-grid-tile>

此代码中的按钮链接到‘home.contact’。我需要突出显示此按钮的状态为'home.contactList‘。

这是路由部分。

$stateProvider
  .state('home', {
    abstract: true,
    templateUrl: 'app/main/main.html',
    controller: 'MainController',
    controllerAs: 'main'
  })
  .state('home.contact', {
    url: '/contacts',
    views: {
      'main': {
        templateUrl: 'app/components/contacts/contacts-list.html',
        controller: 'ContactsController',
        controllerAs: 'contacts'
      }
    }
  })
  .state('home.contactList', {
    url: '/contact',
    views: {
      'main': {
        templateUrl: 'app/components/contacts/contact-list.html',
        controller: 'ContactListController',
        controllerAs: 'contact'
      }
    },
    params: {
      contact: null
    }
  })

Answer 1

状态1 - home.contact

状态2 - home.contactList

控制器-在控制器中初始化作用域变量中的stateName。

 .controller('Controller',function ($scope, $state){
        $scope.stateName = $state.current.name;
  });

视图-在你的视图中动态显示按钮名称，写下这段代码

 <md-grid-tile md-rowspan="1" md-colspan="1" ui-sref="{{stateName}}" class="md-clickable" md-ink-ripple ui-sref-active="active">
<div layout="column" layout-align="center center" layout-fill>
  <ng-md-icon icon="group" class="fill-color-white no-margin"></ng-md-icon>
  <span class="font-size-10">People</span>
</div>

​

Answer 2

将'home.contact‘作为’home.contactList‘的父级(将home.contactList改为home.contact.list)，如下所示-

    $stateProvider
  .state('home', {
    abstract: true,
    templateUrl: 'app/main/main.html',
    controller: 'MainController',
    controllerAs: 'main'
  })
  .state('home.contact', {
    url: '/contacts',
    views: {
      'main': {
        templateUrl: 'app/components/contacts/contacts-list.html',
        controller: 'ContactsController',
        controllerAs: 'contacts'
      }
    }
  })
  .state('home.contact.list', { // changed route name for hierarchy
    url: '/contact',
    views: {
      'main@home': { // added parent name with view name
        templateUrl: 'app/components/contacts/contact-list.html',
        controller: 'ContactListController',
        controllerAs: 'contact'
      }
    },
    params: {
      contact: null
    }
  })

现在，当子状态为active时，它也会自动显示active。有关更多信息- http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref-active