0

I have my states set up like this:

$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'
    });

and my sport template looks like this:

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

I have 2 issues. When this page first loads, I want it to already have the child sport.team loaded in the ui-view, also, in the navigation I would like the current child to be an active link.

I have tried using some tutorials but they don't seem to fit my model. Can someone help?

r3plica
  • 13,017
  • 23
  • 128
  • 290

2 Answers2

0

I created working plunker to show how to...

The way how to define the default child state could be:

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

}])

There are also other ways, check e.g.

The way how to mark the current state is with the ui-sref-active directive (passing class to be applied)

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

If you like to mark only current child, not a parent, check the ui-sref-active-eq

Check it here

Community
  • 1
  • 1
Radim Köhler
  • 122,561
  • 47
  • 239
  • 335
0

Ok, so for the default child selection I just simply changed my states to this:

$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'
    });

because sport.team doesn't have a url it becomes the active child. Also, I set the abstract: true on the parent. If you are navigating to the page from another, instead of using sport state, you should now use the child sport.team (in my case). Because child states inherit parent params and controllers, nothing is lost and everything continues to work.

For the second question about active links, this was actually really easy. I just added this line:

ui-sref-active="active"

to my navigation, which became this:

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

and that is it. Everything now works.

r3plica
  • 13,017
  • 23
  • 128
  • 290