Question

我在我的应用程序中使用angular-ui-router和嵌套状态，我还有一个导航栏。导航栏是手写的，并使用ui-sref-active突出显示当前状态。这是一个两级导航栏。

现在，当我进入时，请说Products / Categories我希望突出显示Products（在第1级）和Categories（在第2级）。但是，使用ui-sref-active，如果我处于州Products.Categories状态，则只突出显示该状态，而不是Products。

有没有办法让Products在该状态下突出显示？

Answer 1

而不是这个 -

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

More Info

更新[2]：

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

Answer 2

这是一个选项，用于嵌套多个非分层相关的状态，并且您没有可用于视图的控制器。您可以使用UI-Router过滤器includedByState来针对任意数量的命名状态检查当前状态。

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

TL; DR：多个不相关的命名状态需要在同一个链接上应用活动类而你没有控制器？使用includedByState。

Answer 3

这是解决方案：

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

Answer 4

让我们说网址树如下：

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('/');
    });

Answer 5

如此简单，步骤1：为导航栏或现有控制器添加控制器，其中包含导航栏添加以下内容

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

}]);

第2步：在导航栏中

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

多数民众赞成。

Answer 6

UI路由器。用于使导航栏处于活动状态的代码段。

<强> HTML

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

在课程中查看.HTML

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

此按钮显示在课程视图中，可以导航到下一个视图，即博客。并使您的导航栏突出显示。

找到类似的示例，一个演示角度ui-router应用程序： https://github.com/vineetsagar7/Angualr-UI-Router

Answer 7

我的代码从/ productGroups导航到/ productPartitions，这是访问＆＃34; productPartitions＆＃34;的唯一方法。视图。

所以我添加了一个隐藏的锚点，其中ui-sref也设置为＆＃34; productPartitions＆＃34;在具有ui-sref-active

的同一列表项中

<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导航按钮仍然有效

Answer 8

这是我为达成相同目标所做的事情。父状态为“ app.message”，并且不声明为抽象。

儿童状态为“ app.message.draft”，“ app.message.all”，“ app.message.sent”。

我的导航链接-

function winner(c1, c2, c3) {
  var customerArr = [];
  customerArr.push(c1, c2, c3);
  // console.log(customerArr);

  const newCustomerArr = customerArr.map(customer => ({
    ...customer,
    scores: customer.scores.reduce(function(total, scores) {
      return total + scores;
    }, 0)
  }));

  return newCustomerArr;
}

c1 = {
  "name": "Bob",
  "scores": [10, 65]
}

c2 = {
  "name": "Bill",
  "scores": [90, 5]
}

c3 = {
  "name": "Charlie",
  "scores": [40, 55]
};

console.log(winner(c1, c2, c2));

定义您的孩子的路线/链接。

并在配置中更新

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

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

8 个答案: