Question

我的州设置如下：

$stateProvider
    .state('sport', {
        url: "/:sport",
        templateUrl: '/app/sport/sport.tpl.html',
        controller: 'DesignerController',
        controllerAs: 'controller'
    })
    .state('sport.team', {
        url: "/team",
        templateUrl: '/app/sport/team.tpl.html'
    })
    .state('sport.kit', {
        url: "/kit",
        templateUrl: '/app/sport/kit.tpl.html'
    })
    .state('sport.design', {
        url: "/design",
        templateUrl: '/app/sport/design.tpl.html'
    })
    .state('sport.refine', {
        url: "/refine",
        templateUrl: '/app/sport/refine.tpl.html'
    })
    .state('sport.order', {
        url: "/order",
        templateUrl: '/app/sport/order.tpl.html'
    });

我的运动模板如下所示：

<div class="container designer">
  <div class="row designer-header">
      <div class="col-md-6">
          <h4>Your sport: <strong>{{ controller.sport.data.title }}</strong></h4>
          <h4>Your club: <strong>{{ controller.clubName }}</strong></h4>
          <h1>Team: <strong>{{ controller.teamName }}</strong></h1>
      </div>
      <div class="col-md-6">
          <nav class="navbar navbar-designer">
              <div class="navbar-header">
                  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                      <span class="sr-only">Toggle navigation</span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                  </button>
              </div>

              <div class="collapse navbar-collapse" id="designer-menu">
                  <ul class="nav navbar-nav navbar-right">
                      <li><a ui-sref=".team">Your team</a></li>
                      <li><a>|</a></li>
                      <li><a ui-sref=".kit">Kit</a></li>
                      <li><a>|</a></li>
                      <li><a ui-sref=".design">Design</a></li>
                      <li><a>|</a></li>
                      <li><a ui-sref=".refine">Refine</a></li>
                      <li><a>|</a></li>
                      <li><a ui-sref=".order">Order</a></li>
                  </ul>
              </div>
          </nav>
      </div>
  </div>

  <div class="row">
      <div class="col-md-12">
          <div class="total pull-right">
              <p>Running total</p>
              <p>£ <span class="lead" ng-bind="controller.total"></span></p>
              <p><a href="#/">click to expand</a></p>
          </div>
      </div>
  </div>

  <div class="row designer-body">
      <ui-view></ui-view>
  </div>

我有2个问题。当这个页面首次加载时，我希望它已经在 ui-view 中加载了 sport.team ，同样，在导航中我希望当前的子项为是一个积极的链接。

我尝试过使用一些教程，但它们似乎不适合我的模型。有人可以帮忙吗？

Answer 1

我created working plunker来展示如何......

如何定义默认子状态的方式可以是：

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

  $rootScope.$on('$stateChangeStart',
   function(event, toState  , toParams
                   , fromState, fromParams) 
    {
      var isSport = toState.name =='sport' ;
      if(isSport)
      {
        event.preventDefault();
        $state.go('sport.team', toParams);
      }
    });

}])

还有其他方法，例如，检查

如何标记当前状态的方法是使用ui-sref-active指令（传递要应用的类）

  <a ui-sref="sport({sport: 'hockey'})"
         ui-sref-active="selected">
  <a ui-sref="sport.team({sport: 'hockey'})" 
        ui-sref-active="selected">
  <a ui-sref="sport.kit({sport: 'hockey'})"
        ui-sref-active="selected">

如果您只想标记当前的孩子，而不是父母，请检查ui-sref-active-eq

检查here

Answer 2

好的，所以对于默认的子选择，我只是简单地将状态改为：

$stateProvider
    .state('sport', {
        url: "/:sport",
        abstract: true,
        templateUrl: '/app/sport/sport.tpl.html',
        controller: 'DesignerController',
        controllerAs: 'controller'
    })
    .state('sport.team', {
        url: "",
        templateUrl: '/app/sport/team.tpl.html'
    })
    .state('sport.kit', {
        url: "/kit",
        templateUrl: '/app/sport/kit.tpl.html'
    })
    .state('sport.design', {
        url: "/design",
        templateUrl: '/app/sport/design.tpl.html'
    })
    .state('sport.refine', {
        url: "/refine",
        templateUrl: '/app/sport/refine.tpl.html'
    })
    .state('sport.order', {
        url: "/order",
        templateUrl: '/app/sport/order.tpl.html'
    });

因为 sport.team 没有网址，所以它会成为活跃的孩子。另外，我在父级上设置了 abstract：true 。如果您要从另一个页面导航到该页面，而不是使用运动状态，则现在应该使用该孩子 sport.team （在我的情况下）。因为儿童国家继承父母参与和控制者，所以没有任何东西丢失，一切都继续有效。

关于有效链接的第二个问题，这实际上非常简单。我刚刚添加了这一行：

UI-SREF活性= “活性”

到我的导航，它变成了这个：

<div class="collapse navbar-collapse" id="designer-menu">
    <ul class="nav navbar-nav navbar-right">
        <li ui-sref-active="active"><a ui-sref=".team">Your team</a></li>
        <li><a>|</a></li>
        <li ui-sref-active="active"><a ui-sref=".kit">Kit</a></li>
        <li><a>|</a></li>
        <li ui-sref-active="active"><a ui-sref=".design">Design</a></li>
        <li><a>|</a></li>
        <li ui-sref-active="active"><a ui-sref=".refine">Refine</a></li>
        <li><a>|</a></li>
        <li ui-sref-active="active"><a ui-sref=".order">Order</a></li>
    </ul>
</div>

就是这样。一切现在都有效。

角度ui-router活动链接

2 个答案: