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

make＆＃39; home.contact＆＃39; 'home.contactList＆＃39;（将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
    }
  })

现在，当子状态处于活动状态时，它也会自动显示。有关详情，请访问http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref-active

如何将ui-sref添加到多个州名？

2 个答案: