Angular-ui-router：ui-sref-活動和嵌套狀態

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），它會很快添加。

UPDATE：

對於這項工作，$state應該在視圖中可用。

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

More Info

UPDATE [2]：

截至0.2.11版本，它的作品開箱。請檢查相關的問題：https://github.com/angular-ui/ui-router/issues/818

Answer 2

這是解決方案：

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

下面是當你嵌套未分層相關的多種狀態的一種選擇，你沒有可用的視圖控制器。您可以使用UI路由器過濾器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 4

讓我們說的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('/'); 
    }); 

Answer 5

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

內courseView.HTML

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

此按鈕預發送內部視圖導航到下一個視圖即博客。並使您的導航欄突出顯示。

找到類似的例子，演示角UI路由器應用：https://github.com/vineetsagar7/Angualr-UI-Router

Answer 6

那麼簡單， 第1步：添加控制器爲您導航欄奧林其中包括導航欄添加以下

現有的控制器

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

}]); 

第二步：在您的導航欄

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

完蛋了。

Answer 7

我的代碼從/ productGroups導航到/ productPartitions，這是訪問「productPartitions」視圖的唯一方法。

所以我添加了UI的SREF也設置爲「productPartitions」有UI-S REF-活躍

<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導航按鈕上獲取視圖時仍處於活動狀態相同的列表項目中隱藏的錨