我的州设置如下:
$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 ,同样,在导航中我希望当前的子项为是一个积极的链接。
我尝试过使用一些教程,但它们似乎不适合我的模型。 有人可以帮忙吗?
答案 0 :(得分:0)
我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
答案 1 :(得分:0)
好的,所以对于默认的子选择,我只是简单地将状态改为:
$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>
就是这样。一切现在都有效。