AngularUI Router中的活动链接/选项卡

Question

我正在使用AngularUI路由器,我正在尝试嵌套/子链接.

一切正常,但我如何在联系人选项卡中选择/激活链接？

基本上,我需要能够在加载联系页面时选择/主动联系一个链接.目前它不会出于某种原因阅读,controlleroneCtrl除非我点击链接联系一个.

angular
    .module ('myApp', ['ui.router'
  ])
    .config (['$urlRouterProvider', '$stateProvider',  function ($urlRouterProvider, $stateProvider) {
        $urlRouterProvider.otherwise ('/summary');

        $stateProvider.
            state ('summary', {
            url: '/summary',
            templateUrl: 'summary.html',
            controller: 'summaryCtrl'
          }).
            state ('about', {
            url: '/about',
            templateUrl: 'about.html',
            controller: 'aboutCtrl'
          }).
            state ('contact', {
            url: '/contact',
            templateUrl: 'contact.html',
            controller: 'contactoneCtrl'
          })
            // Sub page
            .state('contact.one',{
            url: '/contact.contactone',
            templateUrl: 'one.html',
            controller: 'contactoneCtrl'
          })
            // Sub page
            .state('contact.two',{
            url: '/contact.contacttwo',
            templateUrl: 'two.html',
            controller: 'contacttwoCtrl'
          });

      }]);

Plunker:http://plnkr.co/edit/DWjp5M6kJt2MyBrasfaQ?p=preview

Answer 1

有一个更快的方法来做到这一点.只需使用ui-sref-active="active"属性而不是ui-sref.

一个例子:

<ul>
    <li ui-sref-active="active">
        <a ui-sref="state">State 1</a>
    <li>
<ul>

当状态处于活动状态时,列表项会使类处于活动状态.如果您想要一个活动状态或多个类的不同类,只需按如下所示添加它

<ul>
    <li ui-sref-active="active so-active super-active">
        <a ui-sref="state">State 1</a>
    <li>
<ul>

Answer 2

我使用在state根范围上公开的模式并state.current.name在模板中使用.我证明这种全球曝光是合理的,因为它是应用程序级别的关注点.如果您的导航指令具有隔离范围,则需要将其传入,但这并不重要.

在实践中,我认为这对我们来说非常好.

看起来像这样:

JavaScript的

app = angular.module ('myApp', ['ui.router']);
app.controller('MainController', function($scope, $state){
  $scope.state = $state;
});

HTML:

<nav>
  <ul>
    <li ng-repeat="tab in tabs" ng-class="{active: state.current.name === tab.id}>{{tab.name}}</li>
  </ul>
</nav>