AngularJS ui रूटर: किसी दिए गए राज्य के बच्चे राज्यों की सूची प्राप्त करें

Question

आप ui रूटर में एक तरह से किसी दिए गए राज्य के बच्चे राज्यों की सूची प्राप्त करने को जानते हो?

मैं शायद 4 स्तर गहरी नेविगेशन के साथ एक जटिल एसपीए को लागू कर रहा हूँ ui रूटर का उपयोग कर।

मैं रूटर मेज से स्वचालित रूप से उत्पन्न दूसरे स्तर के लिए एक नेविगेशन टैब इंटरफ़ेस को लागू करना चाहते हैं।

कि के लिए, मैं किसी दिए गए राज्य के प्रत्यक्ष बच्चों (शायद एक अमूर्त राज्य है) की सूची प्राप्त करने की जरूरत है। राज्यों को प्राप्त करने का एकमात्र तरीका $state.get() करना है और राज्यों की पूरी सूची प्राप्त करना है, लेकिन इसका मतलब है कि मुझे अपने आप को बाल राज्यों का विश्लेषण करना होगा, और मुझे लगता है कि यह कोड पहले से ही यूई में लिखा गया है -router।

मैं इस सवाल यहाँ मामले में स्रोत कोड में अनुभव के साथ किसी को भी वहाँ जाने या एक प्लगइन या मॉड्यूल है कि मुझे इस पर मदद कर सकते हैं के बारे में पता। इस बीच मैं अपने आप पर एक शोध करूँगा और अगर मुझे कुछ मिल जाए तो परिणाम पोस्ट करें।

Answer 1

अंत में, कार्यक्षमता को स्वयं लागू करना पड़ा।

var routeName='Root.Parent'; // this is the "actual" route 

// this regex is going to filter only direct childs of this route. 
var secondRouteOnlyRegex = new RegExp(routeName + "\.[a-z]+$", "i"); 
var states = $state.get(); 

// this uses lodash to filter the states based on the regex 
var navLinks = _.filter(states, (s) => { 
    return secondRouteOnlyRegex.test(s.name) && !s.abstract; 
}); 
$scope.tabs = navlinks; 

मेरे मार्ग परिभाषाएँ एक data प्रॉपर्टी वाला है:

सार मार्ग टैब इंटरफ़ेस है कि नियंत्रक में, एक नियमित अभिव्यक्ति मार्गों के लिए डिफ़ॉल्ट नामकरण परंपरा का लाभ लेने का उपयोग करके फ़िल्टर राज्यों टैब प्रस्तुत करने के लिए आवश्यक शीर्षक और अन्य मेटाडेटा।

<ul class="nav nav-tabs"> 
    <li ng-repeat="state in tabs" ui-sref-active="active"> 
     <a href="{{state.url}}" ui-sref="{{state.name}}">{{state.data.title}}</a> 
    </li> 
</ul> 

Answer 2

आप stateHelper का उपयोग करते हैं, तो यह आपको (stateHelper रीडमी से) इस तरह राज्यों रजिस्टर करने के लिए सक्षम बनाता है::

angular.module('myApp', [ 'ui.router', 'ui.router.stateHelper' ]) 
    .config(function(stateHelperProvider){ 
     stateHelperProvider 
      .state({ 
       name: 'root', 
       templateUrl: 'root.html', 
       children: [ 
        { 
         name: 'contacts', 
         template: '<ui-view />', 
         children: [ 
          { 
           name: 'list', 
           templateUrl: 'contacts.list.html' 
          } 
         ] 
        }, 
        { 
         name: 'products', 
         templateUrl: 'products.html', 
         children: [ 
          { 
           name: 'list', 
           templateUrl: 'products.list.html' 
          } 
         ] 
        } 
       ] 
      }) 
      .state({ 
       name: 'rootSibling', 
       templateUrl: 'rootSibling.html' 
      }); 
     }); 

मेरे टेम्पलेट इस (बूटस्ट्रैप का प्रयोग करके) तरह दिखता है

अपने नेविगेशन नियंत्रक में आप "रूट" स्थिति पर children विशेषता का उपयोग कर सकते हैं। उदाहरण के लिए, मैं वर्तमान स्थिति के सभी बच्चों को प्रदर्शित करने के लिए इसका उपयोग कर रहा हूं:

angular.module('app') 
    .controller('TransportController', function($scope, $state) { 
     $scope.items = $state.current.children;  
    }); 

आशा है कि इससे मदद मिलती है।

Answer 3

मैं इस जो आसान और तेज है क्या किया:

var chillin = $state.get().filter(function(cState) { return cState.name.indexOf('parent.state.') === 0 });