AngularJS नियंत्रक में आंशिक रूप से

Question

पर आंशिक रूप से बदलता है मैं एक डैशबोर्ड एप्लिकेशन पर काम कर रहा हूं जहां आपके पास एक ही समय में प्रदर्शित मॉड्यूल का एक सेट है। मैं इन मॉड्यूल में एकाधिक 'दृश्य' जोड़ना चाहता हूं। उदाहरण के लिए, गिथब मॉड्यूल का पहला दृश्य आपकी रिपॉजिटरीज़ की एक सूची है। जब आप उस मॉड्यूल में एक रिपॉजिटरी लिंक पर क्लिक करते हैं, तो मॉड्यूल में उस दृश्य को एक नई स्क्रीन के साथ प्रतिस्थापित किया जाएगा जिसमें उस रेपो के बारे में सभी विस्तृत जानकारी दिखाई देगी।

हालांकि, मैं इस मॉड्यूल में इस दृश्य को अलग करना चाहता हूं, इसलिए मैं एक ही समय में अपने अन्य मॉड्यूल का उपयोग जारी रख सकता हूं (मैं पृष्ठों को बिल्कुल स्विच नहीं करना चाहता)।

मैं क्या हासिल करने की कोशिश कर रहा हूँ का एक उदाहरण यहां पाया जा सकता: http://jsfiddle.net/5LgCZ/

इस उदाहरण में, आप एक फल या एक कार पर क्लिक करें और एक नया दृश्य में कि मॉड्यूल में कहा आइटम के बारे में विस्तृत जानकारी प्राप्त करेंगे । (यह वर्तमान में सिर्फ एक चेतावनी करता है)।

यह वही है मैं अब तक किया है, लेकिन मुझे नहीं पता कि कैसे संरचना और जहाँ तक नियंत्रकों और विचारों जाना के रूप में इस दृष्टिकोण है: किसी को जो मदद करने के लिए सक्षम हो जाएगा के लिए पहले से

<div ng-app="app"> 
    <div class="module" ng-controller="FruitCtrl"> 
     <h1>Fruit Module</h1> 
     <ul> 
      <li ng-repeat="fruit in fruits"><a href="#" ng-click="showDetail(fruit)">{{fruit}}</a></li> 
     </ul> 
    </div> 
    <div class="module" ng-controller="CarCtrl"> 
     <h1>Car Module</h1> 
     <ul> 
      <li ng-repeat="car in cars"><a href="#" ng-click="showDetail(car)">{{car}}</a></li> 
     </ul> 
    </div> 
</div> 

धन्यवाद।

Answer 1

मुझे पूरी तरह से यकीन नहीं है कि new view द्वारा आपका क्या मतलब है और ऐसा करने के कुछ तरीके हैं, लेकिन बस आपको सबसे आसान (मेरी राय में) के साथ शुरू करने के लिए, आप एक विवरण तत्व प्राप्त कर सकते हैं प्रत्येक मॉड्यूल है कि आप एक चयन के आधार पर/छिपाने दिखाने के लिए:

<div class="module" ng-controller="FruitCtrl"> 
    <h1>Fruit Module</h1> 
    <ul ng-show='!fruitSelected'> 
     <li ng-repeat="fruit in fruits"><a href="#" ng-click="showDetail(fruit)">{{fruit}}</a></li> 
    </ul> 
    <div class="details" ng-show="fruitSelected">{{fruitSelected}}</div> 
</div> 

function FruitCtrl($scope) { 
    $scope.fruits = ['Banana', 'Orange', 'Apple']; 
    $scope.fruitSelected = false; 
    $scope.showDetail = function (fruit) { 
     $scope.fruitSelected = fruit; 
    } 
} 

Answer 2

आप wan't राज्यों के एक जोड़े में एक ही HTML तत्व में प्रदर्शन के लिए हैं, तो आप लाभ उठा सकते हैं में निर्मित ng-switch निर्देश। इससे आपको तत्व की सामग्री को स्विच करने की अनुमति मिल जाएगी जबकि एक ही समय में उसी $scope को बनाए रखा जा सके ताकि आप आसानी से उन राज्यों के बीच डेटा साझा कर सकें।

यहां आपका अपडेट किया गया पहेली है: http://jsfiddle.net/dVFeN/ और नीचे स्पष्टीकरण चला जाता है।

अपने उदाहरण के मामले में, यह ऐसा दिखाई दे सकता:

एचटीएमएल

<div class="module" ng-controller="FruitCtrl"> 
    <h1>Fruit Module</h1> 
    <div ng-switch="moduleState"> 
     <div ng-switch-when="list"> 
      <ul> 
       <li ng-repeat="fruit in fruits"><a href="#" ng-click="showDetail(fruit)">{{fruit}}</a></li> 
      </ul> 
     </div> 
     <div ng-switch-when="details"> 
      <p>Details for {{ selectedFruit }}</p> 
      <a href="#" ng-click="showList()">Back to list</a> 
     </div> 
    </div> 
</div> 

अतिरिक्त चर moduleState बुलाया विजेट की वर्तमान स्थिति को परिभाषित करता है। ng-switch के लिए निर्देश बाहरी div की सामग्री निर्देशित करता है स्वचालित रूप से उनके ng-switch-when विशेषताओं को पारित मानों के आधार पर आंतरिक तत्वों के बीच स्विच करता है।

जे एस

function FruitCtrl($scope) 
{ 
    $scope.moduleState = 'list'; 

    $scope.fruits = ['Banana', 'Orange', 'Apple']; 

    $scope.showDetail = function(fruit) 
    { 
     $scope.selectedFruit = fruit; 

     $scope.moduleState = 'details'; 
    }; 

    $scope.showList = function() 
    { 
     $scope.moduleState = 'list'; 
    }; 
} 

तुम सब यहाँ क्या करना है moduleState चर, जो स्वत: वांछित विजेट देखने से पता चलता का मूल्य संशोधित करने के लिए है। इसके अतिरिक्त, पेश किए गए selectedFruit चर विवरण में आइटम को देखने के लिए आइटम का संदर्भ रखता है।

ng-switch निर्देश का उपयोग करने का लाभ यह है कि आप आसानी से अपने विजेट में किसी भी राज्य को आसानी से जोड़ सकते हैं।

आप तदनुसार अपने दूसरे मॉड्यूल को संशोधित कर सकते हैं।