Fatal编程技术网
  • angularjs/
  • Angularjs 角ui路由器活动链接

Angularjs 角ui路由器活动链接

angularjs

Angularjs 角ui路由器活动链接,angularjs,angular-ui-router,Angularjs,Angular Ui Router,我的州设置如下： $stateProvider .state('sport', { url: "/:sport", templateUrl: '/app/sport/sport.tpl.html', controller: 'DesignerController', controllerAs: 'controller' }) .state('sport.team', { url: "/team

我的州设置如下：

$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>
我的运动版模板如下所示：

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


您的运动：{{controller.sport.data.title}
您的俱乐部：{{controller.clubName}
团队：{{controller.teamName}}
切换导航

    

  •

我有两个问题。当第一次加载此页面时，我希望它已经在ui视图中加载了子sport.team，同时，在导航中，我希望当前子项成为活动链接

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

我想展示一下如何

定义默认子状态的方法可以是：

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

}])
还有其他方法，例如检查

  • （doc）
如何标记当前状态的方法是使用指令（传递要应用的类）



选中它
确定，因此对于默认的子选项，我只需将状态更改为：


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



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

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>





    

  • 您的团队
    • 

  • |
    • 

  • 套件
    • 

  • |
    • 

  • 设计
    • 

  • |
    • 

  • 优化
    • 

  • |
    • 

  • 订单
    • 





就这样。现在一切正常。
1。您需要直接链接到您的.team状态或将其作为根（
url:'/'
）我根据@r3plia的解决方案在codepan上准备了一个演示：