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

Question 1

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

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

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

Question 2

इसके अलावा-

<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

Question 3

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

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

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

Question 4

यह है उपाय:

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

Question 5

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

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

Question 6

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

बस।

Question 7

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

एचटीएमएल

<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

Question 8

मेरा कोड / 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>

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

Question 9

यहाँ मैंने जो हासिल किया वही किया। मूल स्थिति "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;
                }
            });