कोणीय जेएस नेस्टेड नियंत्रक सूची/आइटम

Question

मैं कोणीय के लिए नया हूं और this जैसे कुछ प्राप्त करने के लिए सर्वोत्तम मार्ग पर सलाह चाहता हूं। यह jsFiddle काम नहीं करता है लेकिन यह विचार है।

मैं चयन के लिए उपलब्ध वस्तुओं के साथ शीर्ष पर टैब चाहता हूं। जब आप आइटम का चयन करते हैं, तो डेटा नीचे आबादी वाला होता है।

मैं एक सूची नियंत्रक और एक आइटम नियंत्रक चाहता था, इसलिए मैं सूची पर कार्य करने वाली विधियों को अलग कर सकता हूं जो आइटम पर उस कार्य को बनाते हैं; चूंकि मैं आइटम को सीधे अद्यतन करने योग्य चाहता था। मुझे पृष्ठ लोड पर सभी डेटा मिल रहा है, इसलिए मैं प्रत्येक टैब को गतिशील रूप से लोड नहीं करना चाहता हूं।

मैं यह कैसे कर सकता हूं और/या मैं पहेली या नया पहेली कैसे ठीक कर सकता हूं? jsFiddle plunker

<div ng-app="myApp"> 
    <div ng-controller="ListController"> 
    <ul class="nav nav-pills"> 
     <li ng-repeat="artist in list"> 
     <a show-tab="" ng-href="" ng-click="select(artist)">{{$index}} - {{artist.name}}</a> 
     </li> 
    </ul> 
    <div ng-controller="ItemController"> 
     <p>{{name}} - {{selected.name}}</p> 
     <span>{{totalSongs}}</span> 
     <span>{{selected.songs.length}}</span> 

     <ul> 
     <li ng-repeat="song in selected.songs" ng-controller="ItemController">{{song}} - {{totalSongs}}</li> 
     </ul> 
    </div> 
    </div> 
</div> 

मैं वास्तव में नियंत्रकों अलग और तर्क अलग रखने के लिए करना चाहते हैं।

Answer 1

मैं ItemController में कुछ कार्यक्षमता बनाई वर्णन करने के लिए कैसे आप अलग से उन पर कार्य कर सकता: सूची नियंत्रक से http://jsfiddle.net/jdstein1/LbAcz/

जोड़ा कुछ डेटा:

$scope.list = [{ 
    name: "Beatles", 
    songs: [{ 
     title: "Yellow Submarine", 
     time: "424" 
    }, { 
     title: "Helter Skelter", 
     time: "343" 
    }, { 
     title: "Lucy in the Sky with Diamonds", 
     time: "254" 
    }] 
}, { 
    name: "Rolling Stones", 
    songs: [{ 
     title: "Ruby Tuesday", 
     time: "327" 
    }, { 
     title: "Satisfaction", 
     time: "431" 
    }] 
}]; 

और आइटम नियंत्रक बाहर fleshed:

app.controller('ItemController', ['$scope', function ($scope) { 
    $scope.selectItem = function (song) { 
     $scope.song.time++; 
    }; 
}]);