कोणीय- ui- राउटर: ui-sref-active और नेस्टेड स्टेट्स


82

मैं angular-ui-routerअपने एप्लिकेशन में स्टेट्स का उपयोग और नेस्टेड कर रहा हूं, और मेरे पास एक नेविगेशन बार भी है। नौसेना बार हाथ से लिखा गया है, और ui-sref-activeवर्तमान स्थिति को उजागर करने के लिए उपयोग करता है। यह दो-स्तरीय नेविगेशन बार है।

अब, जब मैं अंदर हूं, तो मैं Products / Categoriesदोनों Products(स्तर 1 में) और Categories(स्तर 2 में) को हाइलाइट करना चाहूंगा । हालांकि, का उपयोग करते हुए ui-sref-active, अगर मैं राज्य में हूं Products.Categoriesतो केवल उस राज्य को हाइलाइट किया जाता है, नहीं Products

क्या Productsउस राज्य में हाइलाइट करने का कोई तरीका है ?

जवाबों:


139

इसके अलावा-

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

और जानकारी

अद्यतन [२]:

संस्करण के रूप में 0.2.11, यह बॉक्स से बाहर काम करता है। कृपया संबंधित समस्या की जाँच करें: https://github.com/angular-ui/ui-router/issues/818


1
क्या आपने $stateविशेष रूप से इस तरह के दायरे में उपलब्ध कराया है $rootScope.$state = $state?
याकूब

1
@jvannistelrooy हाँ। आमतौर पर मैं इसमें कुछ नहीं डालता, $rootScopeलेकिन यह एक अपवाद है।
रिफत

2
इस उत्तर को पोस्ट करने के लिए धन्यवाद। मेरे उपयोग के लिए पूरी तरह से काम किया। मैंने अपने नियंत्रक के दायरे ( $scope.includes = $state.includes) को शामिल करने के बजाय पूरी विधि को शामिल करने के लिए सिर्फ मैपिंग समाप्त की $state
रिचलेलैंड

31

यहां आपके लिए एक विकल्प है जब आप कई राज्यों को नेस्ट कर रहे हैं जो पदानुक्रम से संबंधित नहीं हैं और आपके पास दृश्य के लिए कोई नियंत्रक उपलब्ध नहीं है। आप यूआई-राउटर फ़िल्टर शामिल का उपयोग कर सकते हैं। किसी भी नामित राज्यों के खिलाफ अपनी वर्तमान स्थिति की जांच करने के लिए बायस्टेट का उपयोग करें।

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

टीएल; डीआर: एकाधिक, असंबंधित, नामित राज्यों को एक ही लिंक पर एक सक्रिय वर्ग लागू करने की आवश्यकता है और आपके पास कोई नियंत्रक नहीं है? उपयोग शामिल करेंबायस्टैट


सबसे अच्छा समाधान यदि आप मेनू-लिंक बना रहे हैं जो पदानुक्रम का पालन नहीं करते हैं State। इसके अलावा, यदि आप मेनू-लिंक में एक मूल मेनू-आइटम बना रहे हैं और सुविधा Stateका उपयोग करने के लिए सिर्फ एक और बनाना नहीं चाहते ui-sref-activeहैं। मेरा मानना ​​है कि Stateमेनू-लिंक में उपयोग के लिए HTML बाहर बिछाने के लिए नहीं है।
बारुन

यह भी ऊपर वर्णित के रूप में उन मेनू लिंक के लिए उपयोगी 1.0.0-Beta.1 में काम करता है। मेरे पास एक साइडबार था जो ui-ref से एक मूल अभिभावक की 4 बाल अवस्थाओं में से एक है। केवल सार राज्य नाम भाग का नामकरण, 4 सिबलिंग अवस्थाओं के बीच स्विच करते समय अपेक्षित रूप से कार्य करता है।
rccursach

आप इस सारे तर्क को एक समारोह में रख सकते हैं :)
कोडर

17

यह है उपाय:

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

संपादित करें:

उपरोक्त केवल सटीक मार्ग पथ के लिए काम करता है और सक्रिय रूट को नेस्टेड मार्गों पर लागू नहीं करेगा। इस समाधान को इसके लिए काम करना चाहिए:

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

मेरे पास चार लिंक हैं, जिन पर मैं सक्रिय वर्ग जोड़ना चाहता हूं, जब उनमें से एक को मैंने क्या करना है, उसके लिए क्या करना है। @ हॉलैंड
जोत धालीवाल

या आप data-ng-class="{ active: $state.includes('root.parent') प्रत्येक लिंक को जोड़ने की कोशिश कर सकते हैं ? activeक्लास का नाम कहां है।
हॉलैंड रिस्ले

मेरा समय बचा लिया .. धन्यवाद
choz

11

आइए बताते हैं कि उराल वृक्ष इस प्रकार है:

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

1
सही उत्तर के रूप में चिह्नित किया जाना चाहिए! धन्यवाद, ui-sref-active-eqपूरी तरह से काम करता है!
मैक्सिम लाफारी 10

2

सो सिंपल, स्टेप 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>

बस।


0

यूआई राउटर । अपने नेविगेशन बार को सक्रिय बनाने के लिए कोड स्निपेट।

एचटीएमएल

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

सीएसएस

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

CourseView.HTML के अंदर

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

यह बटन कोर्स व्यू के अंदर मौजूद है जो आपको अगले व्यू यानी ब्लॉग पर नेविगेट करता है। और आपके नेविगेशन बार को हाइलाइट करता है।

इसी तरह के उदाहरण, एक डेमो कोणीय यूआई-राउटर ऐप ढूंढें: https://github.com/vineetsagar7/Angualr-UI-Router


0

मेरा कोड / productGroups / productPartitions से नेविगेट किया गया, जो "productPartitions" दृश्य तक पहुंचने का एकमात्र तरीका है।

इसलिए मैंने ui-sref के साथ एक छिपा हुआ एंकर जोड़ा, जो एक ही सूची आइटम के साथ "productPartitions" पर सेट है जिसमें ui-sref-सक्रिय है

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

अब प्रोडक्टग्रुप्स नेविगेशन बटन सक्रिय रहता है जब या तो दृश्य को एक्सेस करता है


0

यहाँ मैंने जो हासिल किया वही किया। मूल स्थिति "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;
                }
            });
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.