Angular-ui-router: ui-sref-active 和嵌套状态

小开

最佳答案

而不是这样

<li ui-sref-active="active">
<a ui-sref="posts.details">Posts</a>
</li>

你能做到的

<li ng-class="{active: $state.includes('posts')}">
<a ui-sref="posts.details">Posts</a>
</li>

目前它不工作。有一个讨论正在进行中(https://github.com/angular-ui/ui-router/pull/927) ，并且，它将很快被添加。

更新:

为了实现这一点，$state应该在视图中可用。

angular.module('xyz').controller('AbcController', ['$scope', '$state', function($scope, $state) {
$scope.$state = $state;
}]);

更多信息

更新[2] :

至于版本 0.2.11，它开箱即用。请检查相关问题: https://github.com/angular-ui/ui-router/issues/818

小开

这就是解决办法:

<li class="myNonActiveStyle" ui-sref-active="myActiveStyle">
<a ui-sref="project.details">Details</a>
</li>

编辑:

上面的代码只适用于精确的路由路径，不会将 activeStyle 应用于嵌套路由。这种解决方案应该适用于以下情况:

<a data-ui-sref="root.parent" data-ng-class="{ active: $state.includes('root.parent') }">Link</a>

小开

这里有一个选项，用于当您嵌套多个状态时，这些状态在层次结构上是不相关的，并且您没有可用于视图的控制器。可以使用包含 ByState 的 UI-Router 筛选器根据任意数量的命名状态检查当前状态。

<a ui-sref="production.products" ng-class="{active: ('production.products' |
includedByState) || ('planning.products' | includedByState) ||
('production.categories' | includedByState) ||
('planning.categories' | includedByState)}">
Items
</a>

DR: 多个不相关的命名状态需要在同一个链路上应用一个活动类，而您没有控制器？使用包括 ByState。

小开

假设 url 树如下:

app (for home page) -> app.products -> app.products.category

用法:

<li ui-sref-active="active">
<a ui-sref="app.products">Products</a>
</li>

现在，当你按下 products: 只有产品将被激活。

如果您按下 category: 两个产品和类别将是活跃的。

如果你只希望类别是活跃的，如果你按它，你应该使用: ui-sref-active-eq上的产品，这意味着只有它将是活跃的，而不是它的孩子。

在 app.js 中的正确使用:

angular.module('confusionApp', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider


// route for the home page
.state('app', {
url:'/',
views: { ... }
})


// route for the aboutus page
.state('app.products', {
url:'products',
views: { ... }
})


// route for the contactus page
.state('app.products.category', {
url:'category',
views: { ... }
})


$urlRouterProvider.otherwise('/');
});

小开

UI 路由器 . 激活导航栏的代码片段。

超文本标示语言

<li ui-sref-active="is-active" ui-nested><a ui-sref="course">Courses</a>
</li> <li ui-sref-active="is-active" ui-nested><a ui-sref="blog">blog</a></li>

CSS

is-active{
background-color: rgb(28,153,218);
}

内部课程 View.HTML

<button type="button" ui-sref="blog" class="btn btn-primary">Next</button>

这个按钮出现在球场内部视图中，导航到下一个视图，即博客。并使您的导航栏突出显示。

找到类似的例子，一个演示角 ui 路由器应用程序: 返回文章页面路由器 https://github.com/vineetsagar7/angualr-ui-router :

小开

如此简单, 步骤1: 添加一个控制器为您的导航栏或您现有的控制器，其中包括导航栏添加以下内容

app.controller('navCtrl', ['$scope', '$location', function($scope, $location) {
$scope.isActive = function(destination) {
return destination === $location.path();
}


}]);

Step2: 在你的导航栏里

<li ng-class="{active: isActive('/home')}"><a ui-sref="app.home">Browse Journal</a></li>

就是这样。

小开

我的代码从/productGroups 导航到/productPartitions，这是访问“ productPartitions”视图的唯一方法。

因此，我在同一个具有 ui-sref-active 的列表项中添加了一个隐藏的锚，ui-sref 也被设置为“ productPartitions”

<li ui-sref-active="active">
<a ui-sref="productGroups">
<i class="fa fa-magic"></i> Product groups </a>
<a ui-sref="productPartitions" style="display:none;"></a>
</li>

现在，当访问任何一个视图时，productGroups 导航按钮都保持活动状态

小开

在这里我做到了同样的事情。父状态是“ app.message”，不作为抽象声明。

子状态是“ app.message.draft”、“ app.message.all”、“ app.message.sent”。

我的导航链接-

<a ui-sref-active="active-menu" ui-sref="app.message">Messages</a>

定义子路线/链接。

并在配置中更新-

$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
if (toState.name === 'app.message') {
event.preventDefault();
$state.go('app.message.draft');
return;
}
});