我想知道如何处理角度点击link-ss-1或link-ss-2时,Link-C也是" Current"。
我使用ui -router获取信息。
我的例子:http://plnkr.co/edit/R5qdRKp6t198MQFjeUYy?p=preview
我想:
提前感谢您的回答!
这里是js代码:
(function() {
"use strict"
var app = angular.module("plunker", ["ui.router"]);
app.config(["$stateProvider", "$urlRouterProvider",
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state("linkA", {
url: "/",
templateUrl: "content-A.html"
})
.state("linkB", {
url: "/link-B",
templateUrl: "content-B.html"
})
.state("linkC", {
url: "/link-C",
templateUrl: "content-C.html"
})
.state("ssLink1", {
url: "/ssLink-1",
templateUrl: "content-C-1.html"
})
.state("ssLink2", {
url: "/ssLink-2",
templateUrl: "content-C-2.html"
})
}
]);
}());
这是HTML:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link href="style.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js" data-require="angular.js@1.3.x"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script src="app.js"></script>
</head>
<body>
<nav>
<div class="menu">
<ul>
<li><a ui-sref="linkA" ui-sref-active="current">link A</a></li>
<li><a ui-sref="linkB" ui-sref-active="current">link B</a></li>
<li><a ui-sref="linkC" ui-sref-active="current">link C</a>
<ul>
<li><a ui-sref="ssLink1" ui-sref-active="current">ss-link1</a></li>
<li><a ui-sref="ssLink2" ui-sref-active="current">ss-link2</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="container">
<div ui-view></div>
</div>
</body>
</html>
答案 0 :(得分:0)
您可以使用ui-router
上的子视图执行此操作,它开箱即用:
https://github.com/angular-ui/ui-router/issues/818
如果您不想使用子视图,可以通过添加controller
并在$state
上公开$scope
来执行此操作,以便您可以测试当前状态和将当前类添加到您的链接:
app.controller('navCtrl', ['$scope', '$state', function($scope, $state) {
$scope.$state = $state;
}]);
将您的ui-router设置更改为:
app.config(["$stateProvider", "$urlRouterProvider",
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state("linkA", {
url: "/",
templateUrl: "content-A.html"
})
.state("linkB", {
url: "/link-B",
templateUrl: "content-B.html"
})
.state("linkC", {
url: "/link-C",
templateUrl: "content-C.html"
})
.state("linkC-ssLink1", {
url: "/ssLink-1",
templateUrl: "content-C-1.html"
})
.state("linkC-ssLink2", {
url: "/ssLink-2",
templateUrl: "content-C-2.html"
})
}
]);
你的html:
<nav ng-controller="navCtrl">
<div class="menu">
<ul>
<li><a ui-sref="linkA" ui-sref-active="current">link A</a></li>
<li><a ui-sref="linkB" ui-sref-active="current">link B</a></li>
<li><a ui-sref="linkC" ng-class="{current: $state.current.name.includes('linkC')}">link C</a>
<ul>
<li><a ui-sref="linkC-ssLink1" ui-sref-active="current">ss-link1</a></li>
<li><a ui-sref="linkC-ssLink2" ui-sref-active="current">ss-link2</a></li>
</ul>
</li>
</ul>
</div>
</nav>
这是一个工作的plunker所以你可以检查出来: http://plnkr.co/edit/3vWUwe96addTxNduowpv?p=preview