AngularUI 路由器中的活动链接/选项卡 [英] Active link/tab in AngularUI Router
问题描述
我正在使用 AngularUI 路由器我正在尝试使用嵌套/子链接.
I'm using AngularUI Router and I'm trying to have nested/children links.
一切正常,但如何在联系人"选项卡中选择/激活链接?
All works fine but how do I have selected/active link in Contact tab?
基本上,我需要能够在加载联系人页面时选择/激活联系人一个链接.目前,由于某种原因它不会读取 controlleroneCtrl
除非我点击链接联系人之一.
Basically, I need to be able to have selected/active contact one link when the Contact page is loaded. Currently it does not read for some reason the controlleroneCtrl
unless I click on the link contact one.
angular
.module ('myApp', ['ui.router'
])
.config (['$urlRouterProvider', '$stateProvider', function ($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise ('/summary');
$stateProvider.
state ('summary', {
url: '/summary',
templateUrl: 'summary.html',
controller: 'summaryCtrl'
}).
state ('about', {
url: '/about',
templateUrl: 'about.html',
controller: 'aboutCtrl'
}).
state ('contact', {
url: '/contact',
templateUrl: 'contact.html',
controller: 'contactoneCtrl'
})
// Sub page
.state('contact.one',{
url: '/contact.contactone',
templateUrl: 'one.html',
controller: 'contactoneCtrl'
})
// Sub page
.state('contact.two',{
url: '/contact.contacttwo',
templateUrl: 'two.html',
controller: 'contacttwoCtrl'
});
}]);
Plunker:http://plnkr.co/edit/DWjp5M6kJt2MyBrasfaQ?p=preview
推荐答案
有一个更快的方法来做到这一点.只需使用 ui-sref-active="active"
属性而不是 ui-sref
.
There's a much quicker way to do this. Just use the ui-sref-active="active"
attribute instead of ui-sref
.
示例:
<ul>
<li ui-sref-active="active">
<a ui-sref="state">State 1</a>
<li>
<ul>
当状态处于活动状态时,列表项会使类处于活动状态.如果你想要一个不同的活动状态类或多个类,只需添加如下
When the state is active the list item gets the class active. If you want a different class for active states or more than one class, just add it as follows
<ul>
<li ui-sref-active="active so-active super-active">
<a ui-sref="state">State 1</a>
<li>
<ul>
这篇关于AngularUI 路由器中的活动链接/选项卡的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!