Açısal-ui-yönlendirici: ui-sref-aktif ve iç içe geçmiş durumlar

angular-ui-routerUygulamamda durumları kullanıyorum ve iç içe geçmiş durumlarım ve ayrıca bir gezinme çubuğum var. Gezinme çubuğu elle yazılmıştır ve ui-sref-activemevcut durumu vurgulamak için kullanılır. İki seviyeli bir gezinme çubuğudur.

Şimdi, içeride olduğumda, diyelim ki Products / Categorieshem Products(1. seviyede) hem de ( Categories2. seviyede) vurgulanmasını istiyorum. Bununla birlikte, ui-sref-activeeğer ben durumdaysam Products.Categorieso zaman sadece o durum vurgulanır, vurgulanmaz Products.

Bu Productsdurumda vurgulamanın bir yolu var mı ?

Bunun yerine-

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

Bunu yapabilirsiniz-

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

Şu anda çalışmıyor. Burada devam eden bir tartışma var ( https://github.com/angular-ui/ui-router/pull/927 ) Ve yakında eklenecek.

GÜNCELLEME:

Bunun çalışması $stateiçin görünümde mevcut olmalıdır.

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

Daha fazla bilgi

GÜNCELLEME [2]:

Sürüm itibariyle 0.2.11, kutudan çıkar çıkmaz çalışır. Lütfen ilgili sorunu kontrol edin: https://github.com/angular-ui/ui-router/issues/818

Burada, hiyerarşik olarak ilişkili olmayan birden çok durumu iç içe geçirdiğiniz ve görünüm için bir denetleyicinizin olmadığı durumlar için bir seçenek verilmiştir. Herhangi bir sayıda adlandırılmış duruma karşı mevcut durumunuzu kontrol etmek için, includeByState UI-Yönlendirici filtresini kullanabilirsiniz.

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

TL; DR: Birden çok, ilgisiz, adlandırılmış durum, aynı bağlantı üzerinde etkin bir sınıf uygulamalı ve denetleyiciniz yok mu? Kullanım includedByState .

Çözüm şudur:

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

Düzenle:

Yukarıdakiler yalnızca kesin yol yolu için çalışır ve activeStyle'ı iç içe geçmiş yollara uygulamaz. Bu çözüm bunun için çalışmalıdır:

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

URL ağacının aşağıdaki gibi olduğunu söyleyelim:

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

kullanım:

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

Şimdi, üzerine bastığınızda products: sadece ürünler aktif olacaktır.

tuşuna basarsanız category: hem ürünler hem de kategori aktif olacaktır.

Eğer üzerine basarsanız sadece kategorinin aktif olmasını istiyorsanız, şunu kullanmalısınız: ui-sref-active-eqürünlerde, yani sadece aktif olacak, çocuk değil.

app.js'de doğru kullanım:

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

Çok Basit, Adım 1: Gezinti çubuğunuz için veya gezinme çubuğunun bulunduğu mevcut denetleyiciniz için bir Denetleyici ekleyin aşağıdakileri ekleyin

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

}]);

Adım 2: Gezinti çubuğunuzda

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

Bu kadar.

UI yönlendirici . Gezinme çubuğunuzu aktif hale getirmek için kod parçacığı.

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 içinde

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

Bu düğme, sizi bir sonraki Görünüm yani bloga götüren kurs Görünümü içinde mevcuttur. ve gezinme çubuğunuzun vurgulanmasını sağlar.

benzer bir örnek, bir demo açısal kullanıcı arabirimi uygulaması bulun: https://github.com/vineetsagar7/Angualr-UI-Router

Kodum / productGroups'tan / productPartitions'a, "productPartitions" görünümüne erişmenin tek yolu budur.

Bu yüzden, ui-sref-active olan aynı liste öğesi içinde ui-sref aynı zamanda "productPartitions" olarak ayarlanmış gizli bir bağlantı ekledim.

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

Artık her iki görünüme de erişirken productGroups gezinme düğmesi etkin kalır

İşte aynısını başarmak için yaptığım şey. Ana durum "app.message" dır ve soyut olarak bildirilmez.

Alt durumlar "app.message.draft", "app.message.all", "app.message.sent" dir.

Gezinme Bağlantım -

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

Çocuklarınızın rotalarını / bağlantılarını tanımlayın.

ve yapılandırmada güncelleme

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