AngularJS ui रूटर डिफ़ॉल्ट बच्चे राज्य और ui-sref

Question

मेरे पास मेरी ui रूटर राज्य प्रदाता में निम्नलिखित राज्यों:

$urlRouterProvider.when('/parent', '/parent/child'); 
$stateProvider.state('parent', { 
    url: "/parent", 
    abstract: true 
}); 

$stateProvider.state('parent.child', { 
    url: "/child" 
}); 

कौन सा रूप में here समझाया एक डिफ़ॉल्ट बच्चे राज्य होने के लिए सबसे अच्छा अभ्यास इस प्रकार है यूई-राउटर दस्तावेज़।

हालांकि, जब अब मैं अपने दस्तावेज़ में एक लिंक शामिल करता हूं तो ui-sref जैसे <a ui-sref="parent">Link</a> के साथ माता-पिता को संदर्भित करता हूं, मुझे हमेशा एक त्रुटि मिलती है कि मैं एक अमूर्त राज्य में संक्रमण नहीं कर सकता। जब मैं मैन्युअल रूप से पता बार में यूआरएल दर्ज करता हूं और एंटर दबाता हूं तो सब कुछ ठीक काम करता है।

संबंधित Plunker: http://plnkr.co/edit/d3Z0tOwC3VCTPqGiB0df?p=preview

मैं कैसे जोड़ सकते हैं डिफ़ॉल्ट बच्चे राज्यों के साथ ui-sref?

Answer 1

अमूर्त राज्यों को सीधे लक्षित नहीं किया जा सकता है। वे मुख्य रूप से बाल राज्यों को बनाने के लिए आधार के रूप में कार्य करते हैं। एकमात्र कारण यह यूआरएल के साथ ठीक काम करता है कि/माता-पिता .जब

इसका मतलब है कि जब आप एक बच्चे

<a ui-sref="parent.child"> 

माता पिता के अंदर बच्चे का उपयोग कर आह्वान लोड हो जाता है द्वारा पकड़ा जाता है, माता पिता अर्थ है इसके चारों ओर परत के रूप में लोड किया जाएगा।

तो, कभी भी एक अमूर्त राज्य को लक्षित न करें। यह एक दरवाजा फ्रेम के अंदर एक दरवाजा होने की तरह है। आप केवल दरवाजे (बच्चे) के साथ खुल सकते हैं और बातचीत कर सकते हैं, लेकिन फ्रेम (पैरेंट) के साथ सीधे कभी नहीं। हालांकि, जब आप दरवाजे से बातचीत करते हैं, तो दरवाजा और फ्रेम एक प्रणाली का हिस्सा होता है जो लोड हो जाता है।

आप बच्चे को एक खाली यूआरएल दे सकते हैं, ताकि वह मूल राज्य यूआरएल में कुछ भी शामिल न करे और फिर लोड हो जाए।

अधिक जानकारी के लिए यहाँ देखें: https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#abstract-states

Answer 2

आप सार राज्यों के लिए $state के सुविधाजनक नामकरण संरचना का उपयोग करना चाहते हैं, तो आप एक सेवा में इस का उपयोग कर सकते हैं:

$location.path(
    $state.href('app.some.abstract.state', { some: 'params' }) 
); 

या एक में इस टेम्पलेट ($state स्थानीय या वैश्विक $scope में उपलब्ध होना चाहिए):

<a ng-href="{{$state.href('app.some.abstract.state', { some: 'params' })}}">...</a> 

यदि मैंने इसे नियमित रूप से नियमित रूप से किया है, तो मैं इसके लिए ui-sref जैसा निर्देश बनाउंगा, अमूर्त राज्य सीमा को घटा दूंगा।