angular ui-router 个活动链接

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>

我有两个问题。当这个页面第一次加载时，我希望它已经在 ui-view[=27= 中加载了 child sport.team ]，另外，在导航中，我希望当前的 child 成为活动的 link。

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

Answer 1

我created working plunker展示如何...

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

.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);
      }
    });

}])

还有其他方法，检查例如

Angular UI-Router $urlRouterProvider .when not working when I click <a ui-sref="...">
How to: Set up a default/index child state（文档）

标记当前状态的方法是使用ui-sref-active指令（传递class来应用）

  <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">

如果您只想标记当前 child，而不是 parent，请检查 ui-sref-active-eq

检查一下here

Answer 2

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

$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 没有 url 它成为活动 child。另外，我在 parent 上设置了 abstract: true。如果您从另一个页面导航到该页面，而不是使用 sport 状态，您现在应该使用 child sport.team（在我的例子中）。因为 child 状态继承 parent 参数和控制器，所以不会丢失任何东西，一切都会继续工作。

关于活动链接的第二个问题，这个其实很简单。我刚刚添加了这一行：

ui-sref-active="active"

到我的导航，变成了这样：

<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>

就是这样。现在一切正常。

angular ui-router 个活动链接

angular ui-router active links

angularjs

angular-ui-router