यूआई-रूटर छिपाने माता पिता टेम्पलेट

Question

एक राज्य मान लीजिए projects.new कहा जाता है जहां नईपरियोजनाओं की एक नेस्टेड राज्य है। क्या केवल बच्चे के टेम्पलेट को दिखाने के लिए अभिभावक के टेम्पलेट को छिपाने का कोई तरीका है?

Answer 1

आप जांच सकते हैं कि राज्य (मार्ग) कब बदलता है और पैरेंट व्यू को छुपाता है। Demo in jsfiddle। यह कामकाजी उदाहरण AngularUI Router का उपयोग करता है लेकिन तर्क मानक ngRoute के साथ काफी समान है।

var parents = ['parent']; 
$rootScope.$on('$stateChangeSuccess', function(event, toState) { 
    $scope.hideParent = parents.indexOf(toState.name) !== -1 ? false : true; 
}); 

या हम जांच कर सकते हैं कि राज्य के नाम में मूल राज्य का नाम है या नहीं। एक साधारण रेगेक्स पैटर्न हमें बता सकता है, राज्य नाम parent.child को सीमित करने के लिए डॉट नोटेशन का उपयोग करते हैं।

var re = /^projects.\w+/; 
$rootScope.$on('$stateChangeSuccess', function(event, toState) { 
    $scope.hideParent = re.test(toState.name); 
}); 

Answer 2

इस समस्या को हल करने के दो तरीके हैं।

नाम से ui दृश्य को संबोधित करते

आप या तो नामित दृश्यों का उपयोग घोषित करने के नाम से दृश्य संबोधित करके कि अपने टेम्पलेट सही "जनक" ui ध्यान में रखते हुए रेंडर किया जाना चाहिए की तरह यहाँ किया जा सकता था:

https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

इसके लिए या तो ज्ञात दादाजी राज्य का संदर्भ देकर ui-view तत्वों को नामित करने या उन्हें संबोधित करने की आवश्यकता है।

एक अलग राज्य पदानुक्रम

एक अन्य विकल्प इन राज्यों को एक दूसरे से विरासत (नहीं करने के लिए है का उपयोग करना या कम से कम होने .newprojects सूची राज्य का एक बच्चा नहीं किया जा रहा। नाम में डॉट का उपयोग करके, आप बिंदु से पहले राज्य के एक substate परिचय तो वहाँ अनेक विकल्प हैं:।

• राज्यों projects और projects_new उन्हें एक ही स्तर पर दिखाई देते हैं और इस प्रकार सूची टेम्पलेट में new हिस्सा रेंडर करने के लिए कोशिश नहीं कर कर बुला। (मुझे इस दृष्टिकोण को बहुत पसंद नहीं है ause वहाँ उन राज्यों के बीच आम में कुछ)
• एक सार राज्य को शुरू करने और इस के अंतर्गत वर्तमान "परियोजना सूची" राज्य चलती है, ताकि आप projects दो substates projects.list और projects.new साथ सार जहां projects.list सिर्फ माता-पिता का यूआरएल का उपयोग करता है राज्य। विवरण के लिए कृपया https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#abstract-state-usage-examples